js實現多個滑動門在同一個頁面展示效果

標籤：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>

     

     每天進步一點點，趣味無限~