本章节分享一段简单的代码实例,它利用javascript实现了简单的选项卡功能。
更多选项卡效果可以查阅特效下载版块选项卡分类。
点击能够实现图片的切换效果,并且切换具有滑动效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> * { padding:0px; } button { width:95px; } active { background-color:yellow; } #wrap { width:510px; overflow:hidden; margin:0 auto; } #inner{ width: 9999px; overflow:hidden; position:relative; left:0; transition:left 0.6s; } #inner a { float: left; } #inner img { display: block; width: 510px; } #main { text-align: center; } </style> <script type="text/javascript"> window.onload = function () { var btnList = document.getElementsByTagName("button"); var inner = document.getElementById("inner"); var perWidth = inner.children[0].offsetWidth; for (var index = 0; index < btnList.length; index++) { btnList[index].index = index; btnList[index].onclick = function () { inner.style.left = -perWidth * this.index + "px"; for(var j = 0; j < btnList.length; j++) { btnList[j].className = ""; } this.className = "active"; } } } </script> </head> <body> <div id="wrap"> <div id="inner"> <a href="###"><img src="demo/jQuery/img/2.jpg"></a> <a href="###"><img src="demo/jQuery/img/2.jpg"></a> <a href="###"><img src="demo/jQuery/img/5.jpg"></a> <a href="###"><img src="demo/jQuery/img/4.jpg"></a> <a href="###"><img src="demo/jQuery/img/5.jpg"></a> </div> </div> <div id="main"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。
(2).var btnList = document.getElementsByTagName("button"),获取button按钮元素集合。
(3).var inner = document.getElementById("inner"),获取元素对象。
(4).var perWidth = inner.children[0].offsetWidth,获取inner元素下第一个子元素的宽度,也就是第一个链接的宽度。
(5).for (var index = 0; index < btnList.length; index++) {},通过for循环遍历每一个button元素。
(6).btnList[index].index = index,为按钮添加一个自定义index属性,并将属性值设置为当前按钮的索引。
(7). btnList[index].onclick = function () {},为当前按钮注册onclick事件处理函数。
(8).inner.style.left = -perWidth * this.index + "px",设置inner元素的left属性值,也就是向左移动,值得大小根据索引来确定。
二.相关阅读:
(1).getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。
(2).children可以参阅javascript children一章节。
(3).offsetWidth可以参阅js offsetWidth一章节。
js左右滑动选项卡效果代码实例,这样的场景在实际项目中还是用的比较多的,关于js左右滑动选项卡效果代码实例就介绍到这了。
js左右滑动选项卡效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98617.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。