码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-07-03 22:37:49      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:style   blog   java   color   art   问题   

        多个滑动门在同一个页面展示,在工作小组里面,一直是一个让人比较纠结的问题~学习库里面有一个技术同事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>

     

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

 

        

js实现多个滑动门在同一个页面展示效果,布布扣,bubuko.com

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

标签:style   blog   java   color   art   问题   

原文地址:http://www.cnblogs.com/honeyHHX/p/3820786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!