[javascript]一段焦点图的js代码
2014-10-25 15:29
375 查看
<html> <head> <meta name="name" content="content"charset="utf-8"/> <style type="text/css" media="screen"> #main{ width: 800px;height: 300px;margin: 0 auto;position: relative;} #main .list{z-index: 10;} #main .list li{position: absolute;width: 800px;height: 300px;background: #ccc;list-style: none} #main .bt{ z-index: 200;position: absolute;bottom: 10px;right: 10px;} #main .bt li{list-style: none;float: left;width: 40px;height: 40px;border: 1px solid #ccc;text-align: center;line-height: 40px;} #main .bt li:hover{background:#ccc} </style> <script type="text/javascript" src="move.js"></script> <script type="text/javascript"> window.onload=function () { var bt=document.getElementsByTagName('ul')[1]; var btli=bt.getElementsByTagName('li'); var list=document.getElementsByTagName('ul')[0]; var lis=list.getElementsByTagName('li'); var index=5; lis[0].style.zIndex=index; for (var i = 0; i < btli.length; i++) { btli[i].index=i; btli[i].onmouseover=function () { lis[this.index].style.zIndex=index; index++; } btli[i].onmouseout=function () { lis[0].style.zIndex=index; index++; } }; } </script> <title></title> </head> <body> <div id="main"> <ul class="list"> <li style="background: #f00;"></li> <li style="background: #ff0"></li> <li style="background: #f0f"> </li> <li style="background: #fcc"></li> </ul> <div class="bt"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div><!-- / --> </div> </body> </html>
闲着没事写的一段javascript代码。
相关文章推荐
- JavaScript 写一段最短的代码,用上js所有关键字
- 由一段代码谈前端js优化和编码规范(一) 分类: JavaScript 2015-03-21 12:43 668人阅读 评论(1) 收藏
- 一段js的代码,用来控制弹出窗口的位置
- 一段对DataGrid表格的计算的JS代码
- 一段几乎可以让你死机的JS代码
- 按比例微缩图片的一段小小的JS代码
- 一段JavaScript代码
- [JavaScript]一段把客户端的中文字串转换成UTF-8的代码
- 按比例微缩图片的一段小小的JS代码
- [JS代码]用JavaScript实现网页轮换广告效果
- 在javascript中写包含js的包含代码
- 按比例微缩图片的一段小小的JS代码
- [JS代码]JavaScript实用的一些技巧
- 一段js表格排序代码
- 一段让我吃惊的javascript代码。(就两句) 发送键盘命令生成get set脚本。
- 一段JS代码模仿SINA的广告条
- 一段动态滚动公告栏的js代码
- 一段生成treeview的js代码
- 一段checkbox全选或钱取消的js代码
- (转)javascript如何调用C#后代码中的过程 和ASP.NET调用JS乱码解决方案