首页 > 代码库 > js实现多个滑动门在同一个页面展示效果

js实现多个滑动门在同一个页面展示效果

2024-07-10 15:19:39   227人阅读

        多个滑动门在同一个页面展示，在工作小组里面，一直是一个让人比较纠结的问题~学习库里面有一个技术同事5年前给封装的控件，大家就一直在用复用那个。

        最近项目里面用到的这个效果非常多，每次都要调用那个js控件，还得按规则匹配相应的id，真心觉得麻烦，就在想，为嘛不自己写一个可以通用的~

        于是，就有了下面这个脚本效果：

        js：  

<script type="text/javascript" >  var arrayObj = [‘ ‘,‘ ‘,‘ ‘,‘ ‘,‘ ‘,‘ ‘,‘ ‘];  function slide(index,id){		    var newsObj = document.getElementById(‘a‘ +index+arrayObj[index]);			var newsObj01 = document.getElementById(‘b‘ +index +arrayObj[index]);			var obj = document.getElementById(‘a‘+index+ id);			var obj01 = document.getElementById(‘b‘+index+ id);			if(newsObj){				 newsObj.style.display = ‘none‘;				 newsObj01.className = ‘option2‘;						}				obj01.className = ‘option1‘;				obj.style.display = ‘‘;                arrayObj[index]= id;	}</script>

　　html代码（放了三个滑动门作为示例）

<div class="indexNews">  <div class="top">    <div class="option2" id="b11" onm ouseOver="slide(1,1)">体育新闻</div>    <div class="option2" id="b12" onm ouseOver="slide(1,2)"><a href="http://www.mamicode.com/#">娱乐新闻</a></div>    <div class="option2" id="b13" onm ouseOver="slide(1,3)"><a href="http://www.mamicode.com/#">推荐新闻</a></div>    <div class="option2" id="b14" onm ouseOver="slide(1,4)"><a href="http://www.mamicode.com/#">推荐新闻</a></div>  </div>  <div class="newsBorder">    <div id="a11" style="display:none;">	<div class=articleList>          <ul>            <li>文字内容</li>          </ul>        </div>    </div>	    <div id="a12" style="display:none;">	<div class=articleList>          <ul>            <!-- 娱乐新闻 -->            <li><a href="http://www.mamicode.com/#">文字内容文字内容</a></li>          </ul>        </div>    </div>    <div id="a13" style="display:none;">	<div class=articleList>          <ul>            <!-- 推荐新闻 -->            <li><a href="http://www.mamicode.com/#">文字内容文字内容文字内容</a></li>          </ul>        </div>    </div>    <div id="a14" style="display:none;">	<div class=articleList>          <ul>            <!-- 推荐新闻 -->            <li><a href="http://www.mamicode.com/#">文字内容文字内容文字内容文字内容</a></li>          </ul>        </div>    </div>  </div></div><div class="indexNews">  <div class="top">    <div class="option2" id="b21" onm ouseOver="slide(2,1)">体育新闻</div>    <div class="option2" id="b22" onm ouseOver="slide(2,2)"><a href="http://www.mamicode.com/#">娱乐新闻</a></div>    <div class="option2" id="b23" onm ouseOver="slide(2,3)"><a href="http://www.mamicode.com/#">推荐新闻</a></div>  </div>  <div class="newsBorder">    <div id="a21" style="display:none;">	<div class=articleList>          <ul>            <li><a href="http://www.mamicode.com/#">"文字内容文字内容文字内容文字内容</a></li>            <li><a href="http://www.mamicode.com/#">文字内容文字内容文字内容文字内容文字内容文字内容文字内容</a></li>          </ul>        </div>    </div>	    <div id="a22" style="display:none;">	<div class=articleList>          <ul>            <li><a href="http://www.mamicode.com/#">文字内容文字内容文字内容</a></li>          </ul>        </div>    </div>    <div id="a23" style="display:none;">	<div class=articleList>          <ul>            <li><a href="http://www.mamicode.com/#">文字内容</a></li>          </ul>        </div>    </div>      </div></div><div class="indexNews">  <div class="top">    <div class="option2" id="b31" onm ouseOver="slide(3,1)">体育新闻</div>    <div class="option2" id="b32" onm ouseOver="slide(3,2)"><a>娱乐新闻</a></div>  </div>  <div class="newsBorder">    <div id="a31" style="display:none;">	<div class=articleList>          <ul>            <li><a href="http://www.mamicode.com/#">文字内容文字内容</a></li>          </ul>        </div>    </div>    <div id="a32" style="display:none;">	<div class=articleList>          <ul>            <li><a href="http://www.mamicode.com/#">文字内容文字内容文字内容文字内容文字内容文字内容</a></li>          </ul>        </div>    </div>  </div></div>

　　最后调用js

<script>slide(1,1);slide(2,1);slide(3,1);</script>

     

     每天进步一点点，趣味无限~

 

        


联系
我们