js內容左右滑動切換的選項卡程式碼例項
分享一段程式碼例項,它實現了簡單的tab選項卡功能。
選項卡的內容部分切換效果是左右水平滑動,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } ui,li { list-style: none; } #list { overflow: hidden; margin: 30px 50px 0 50px; } #list li { float: left; width: 160px; height: 36px; border: #ddd 1px solid; line-height: 36px; text-align: center; } #list li.cur_li { background-color: #999; color: #fff; } .showbox { width: 482px; height: 300px; overflow: hidden; border: #ddd 1px solid; margin-left: 50px; border-top: none; position: relative; } #box_ul { overflow: hidden; width: 1446px; } #box_ul li { width: 482px; height: 300px; float: left; } </style> <script> window.onload = function() { show(); } function show() { var oList = document.getElementById("list"); var aLi = oList.getElementsByTagName("li"); var oUl = document.getElementById("box_ul"); oUl.style.position = "absolute"; oUl.style.top = "0"; oUl.style.left = "0"; aLi[0].onmouseover = function() { for(var i=0; i<aLi.length; i++){ aLi[i].className = ""; } this.className = "cur_li"; oneMoveElement("box_ul", 0, 0, 10); } aLi[1].onmouseover = function() { for(var i=0; i<aLi.length; i++){ aLi[i].className = ""; } this.className = "cur_li"; oneMoveElement("box_ul", -482, 0, 10); } aLi[2].onmouseover = function() { for(var i=0; i<aLi.length; i++){ aLi[i].className = ""; } this.className = "cur_li"; oneMoveElement("box_ul", -964, 0, 10); } } function oneMoveElement(id, final_x, final_y, interval) { var elem = document.getElementById(id); var xPos = parseInt(elem.style.left); var yPos = parseInt(elem.style.top); var dist = 0; if (elem.movement) { clearTimeout(elem.movement) } if (xPos < final_x) { dist = Math.ceil((final_x - xPos) / 10) xPos += dist; } if (xPos > final_x) { dist = Math.ceil((xPos - final_x) / 10) xPos -= dist; } if (yPos < final_y) { dist = Math.ceil((final_y - yPos) / 10) yPos += dist; } if (yPos > final_y) { dist = Math.ceil((yPos - final_y) / 10) yPos -= dist; } elem.style.top = yPos + "px"; elem.style.left = xPos + "px"; var repert = "oneMoveElement('" + id + "'," + final_x + "," + final_y + "," + interval + ")" elem.movement = setTimeout(repert, interval) } </script> </head> <body> <ul id="list"> <li class="cur_li">螞蟻部落一</li> <li style="border-left: none;border-right: none;">螞蟻部落二</li> <li>螞蟻部落三</li> </ul> <div class="showbox"> <ul id="box_ul"> <li style="background-color: red;"></li> <li style="background-color: royalblue;"></li> <li style="background-color: burlywood;"></li> </ul> </div> </body> </html>
相關文章
- js左右滑動選項卡效果程式碼例項JS
- JavaScript左右滑動切換的選項卡詳解JavaScript
- 滑鼠虛滑過選項卡切換效果程式碼例項
- tab選項卡切換例項程式碼
- jQuery選項卡切換圖片效果程式碼例項jQuery
- js選項卡簡單程式碼例項JS
- 原生js tab選項卡程式碼例項JS
- 點選左右箭頭可以移動選項例項程式碼
- jQuery選項卡例項程式碼jQuery
- js實現的垂直選項卡效果程式碼例項JS
- js實現的可以通用的選項卡程式碼例項JS
- js禁止使用滑鼠選中元素內容程式碼例項JS
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- js獲取指定單元格的內容程式碼例項例項JS
- replace()方法替換字串內容程式碼例項字串
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- js橫向滑動摺疊導航選單程式碼例項JS
- 如何實現選項卡切換
- js獲取點選單元格中的內容程式碼例項JS
- jQuery實現的tab選項卡程式碼例項jQuery
- jquery實現的選項卡效果例項程式碼jQuery
- CSS3 tab選項卡動態切換CSSS3
- JavaScript多級選項卡效果程式碼例項JavaScript
- CollectionView 單個選項卡的滑動View
- jQuery點選文字框清除內容程式碼例項jQuery
- js圖片切換例項JS
- js獲取偽元素選擇器規定的內容程式碼例項JS
- 純css實現的tab選項卡程式碼例項CSS
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- jquery.idTabs實現的選項卡程式碼例項jQuery
- 動態修改網頁title內容程式碼例項網頁
- css3實現tab選項卡程式碼例項CSSS3
- 導航欄背景切換程式碼例項
- jquery實現的滑動門程式碼例項jQuery
- 物件導向實現的tab選項卡效果程式碼例項物件
- jQuery實現滑動門程式碼例項jQuery