- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>无标题文档</title>
- </head>
- <body>
- <style>
- .undis{display:none;}
- </style>
- <ul>
- <li><span>1</span><a id="m01" class="sd01" href="#">测试测试测试测试测试测试测试测试1</a>
- <div id="c01"><img src1="http://d.lanrentuku.com/down/js/xiangce-877/images/1.jpg" width="262" height="105" /></div></li>
- <li><span>2</span><a id="m02" class="sd02" href="#">测试测试测试测试测试测试测试测试2</a>
- <div class="undis" id="c02"><img src1="http://d.lanrentuku.com/down/js/xiangce-877/images/8.jpg" width="262" height="105" /></div></li>
- <li><span>3</span><a id="m03" href="#" class="sd02">测试测试测试测试测试测试测试测试3</a>
- <div id="c03" class="undis"><img src1="http://d.lanrentuku.com/down/js/xiangce-877/images/17.jpg" width="262" height="105" /></div></li>
- <li><span>4</span><a id="m04" ="#" class="sd02">测试测试测试测试测试测试测试测试4</a>
- <div id="c04" class="undis"><img src1="http://d.lanrentuku.com/down/js/xiangce-877/images/19.jpg" width="262" height="105" /></div></li>
- <li><span>5</span><a id="m05" class="undis sd02" href="#">测试测试测试测试测试测试测试测试5</a>
- <div id="c05" class="undis"><img src1="http://d.lanrentuku.com/down/js/xiangce-877/images/3.jpg" width="262" height="105" /></div></li>
- </ul>
- <script type="text/javascript">
- function scrollDoor(){
- }
- scrollDoor.prototype = {
- sd : function(menus,divs,openClass,closeClass){
- var _this = this;
- if(menus.length != divs.length)
- {
- alert("菜单层数量和内容层数量不一样!");
- return false;
- }
- for(var i = 0 ; i < menus.length ; i++)
- {
- _this.$(menus[i]).value = i;
- _this.$(menus[i]).onmouseover = function(){
- for(var j = 0 ; j < menus.length ; j++)
- {
- _this.$(menus[j]).className = closeClass;
- _this.$(divs[j]).style.display = "none";
- }
- _this.$(menus[this.value]).className = openClass;
- _this.$(divs[this.value]).style.display = "block";
- }
- }
- },
- $ : function(oid){
- if(typeof(oid) == "string")
- return document.getElementById(oid);
- return oid;
- }
- }
- window.onload = function(){
- var SDmodel = new scrollDoor();
- SDmodel.sd(["m01","m02","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02");
- }
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/190720134702.html
来源: http://www.codesnippet.cn/detail/190720134702.html