js实现多个滑动门在同一个页面展示效果
浏览数：17 /
时间：2015年06月09日
多个滑动门在同一个页面展示，在工作小组里面，一直是一个让人比较纠结的问题~学习库里面有一个技术同事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" onMouseOver="slide(1,1)">体育新闻</div>
<div class="option2" id="b12" onMouseOver="slide(1,2)"><a href="#">娱乐新闻</a></div>
<div class="option2" id="b13" onMouseOver="slide(1,3)"><a href="#">推荐新闻</a></div>
<div class="option2" id="b14" onMouseOver="slide(1,4)"><a href="#">推荐新闻</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="#">文字内容文字内容</a></li>
</ul>
</div>
</div>
<div id="a13" style="display:none;">
<div class=articleList>
<ul>
<!-- 推荐新闻 -->
<li><a href="#">文字内容文字内容文字内容</a></li>
</ul>
</div>
</div>
<div id="a14" style="display:none;">
<div class=articleList>
<ul>
<!-- 推荐新闻 -->
<li><a href="#">文字内容文字内容文字内容文字内容</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="indexNews">
<div class="top">
<div class="option2" id="b21" onMouseOver="slide(2,1)">体育新闻</div>
<div class="option2" id="b22" onMouseOver="slide(2,2)"><a href="#">娱乐新闻</a></div>
<div class="option2" id="b23" onMouseOver="slide(2,3)"><a href="#">推荐新闻</a></div>
</div>
<div class="newsBorder">
<div id="a21" style="display:none;">
<div class=articleList>
<ul>
<li><a href="#">"文字内容文字内容文字内容文字内容</a></li>
<li><a href="#">文字内容文字内容文字内容文字内容文字内容文字内容文字内容</a></li>
</ul>
</div>
</div>
<div id="a22" style="display:none;">
<div class=articleList>
<ul>
<li><a href="#">文字内容文字内容文字内容</a></li>
</ul>
</div>
</div>
<div id="a23" style="display:none;">
<div class=articleList>
<ul>
<li><a href="#">文字内容</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="indexNews">
<div class="top">
<div class="option2" id="b31" onMouseOver="slide(3,1)">体育新闻</div>
<div class="option2" id="b32" onMouseOver="slide(3,2)"><a>娱乐新闻</a></div>
</div>
<div class="newsBorder">
<div id="a31" style="display:none;">
<div class=articleList>
<ul>
<li><a href="#">文字内容文字内容</a></li>
</ul>
</div>
</div>
<div id="a32" style="display:none;">
<div class=articleList>
<ul>
<li><a href="#">文字内容文字内容文字内容文字内容文字内容文字内容</a></li>
</ul>
</div>
</div>
</div>
</div>
最后调用js
<script>slide(1,1);slide(2,1);slide(3,1);</script>
每天进步一点点，趣味无限~
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
