js和css3實現的圖片立體滾動切換效果程式碼例項
本章節分享一段程式碼例項,它實現了圖片立體滾動切換效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html, body { padding: 0px; margin: 0px; font-family: "微軟雅黑"; background: #ccc; } .boxDom { margin: 100px auto; perspective: 2000px; width: 600px; height: 300px; } .boxDom ul { padding: 0px; position: relative; top: 0px; bottom: 0px; margin: auto; width: 600px; height: 300px; list-style: none; font-size: 0px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } .boxDom ul li { position: absolute; top: 0px; left: 0px; border: 2px solid #fff; width: 600px; height: 300px; overflow:hidden; } .imgOne { transform: translateZ(150px); -webkit-transform: translateZ(150px); -moz-transform: translateZ(150px); -ms-transform: translateZ(150px); } .imgTwo { transform: translateY(-150px) rotateX(90deg); -webkit-transform: translateY(-150px) rotateX(90deg); -moz-transform: translateY(-150px) rotateX(90deg); -ms-transform: translateY(-150px) rotateX(90deg); } .imgThree { transform: translateZ(-150px) rotateY(180deg); -webkit-transform: translateZ(-150px) rotateY(180deg); -moz-transform: translateZ(-150px) rotateY(180deg); -ms-transform: translateZ(-150px) rotateY(180deg); } .imgfour { transform: translateY(150px) rotateX(270deg); -webkit-transform: translateY(150px) rotateX(270deg); -moz-transform: translateY(150px) rotateX(270deg); -ms-transform: translateY(150px) rotateX(270deg); } .boxDom div { background: rgba(0,0,0,.6); width: 80px; height: 80px; border-radius: 50%; position: absolute; top: 0px; bottom: 0px; margin: auto; text-align: center; font-size: 3em; line-height: 1.5em; color: #fff; cursor: pointer; } .left { left: 0px; } .right { right: 0px; } </style> <script> window.onload = function () { var ulDom = document.getElementById("ulBox"); var liObj = ulDom.getElementsByTagName("li"); var leftBtn = document.getElementById("leftDiv"); var rightBtn = document.getElementById("rightDiv"); var deg = 0; var exps = null; var info = null; var num = null; leftBtn.addEventListener("click", auto, false); rightBtn.addEventListener("click", auto, false); function auto() { var btnStr = this.getAttribute("id"); if (btnStr == "leftDiv") { info = setInterval(leftImg, 8); } else { info = setInterval(rightImg, 8); } this.removeEventListener("click", auto, false); console.log(); } function leftImg() { deg = deg + 1; exps = deg / 90; num = parseInt(exps) + 1; if (isNum(exps)) { clearInterval(info); leftBtn.addEventListener("click", auto, false); } else { ulDom.style.transform = "rotateX(" + deg + "deg)"; } } function rightImg() { deg = deg - 1; exps = deg / 90; num = parseInt(exps) + 1; if (isNum(exps)) { clearInterval(info); rightBtn.addEventListener("click", auto, false); } else { ulDom.style.transform = "rotateX(" + deg + "deg)"; } } //是否為整數 function isNum(s) { var type = "^-?\\d+$"; var re = new RegExp(type); return re.test(s) } } </script> </head> <body> <div class="boxDom"> <ul id="ulBox"> <li class="imgOne"><img src="demo/js/img/2.jpg" alt="" /></li> <li class="imgTwo"><img src="demo/js/img/2.jpg" alt="" /></li> <li class="imgThree"><img src="demo/js/img/2.jpg" alt="" /></li> <li class="imgfour"><img src="demo/js/img/2.jpg" alt="" /></li> </ul> <div class="left" id="leftDiv"><</div> <div class="right" id="rightDiv">></div> </div> </body> </html>
相關文章
- js滑鼠移動實現圖片立體滾動效果JS
- jQuery選項卡切換圖片效果程式碼例項jQuery
- css3實現的立體滾動效果CSSS3
- CSS3實現的立方體3D滾動效果程式碼例項CSSS33D
- javascript實現的圖片簡單切換程式碼例項JavaScript
- js圖片切換例項JS
- css3實現的書本立體翻頁效果程式碼例項CSSS3
- css3實現的立體導航選單效果程式碼例項CSSS3
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- 馬賽克效果的JS圖片切換程式碼JS
- css實現圖片灰度效果程式碼例項CSS
- js實現的文字垂直滾動例項程式碼JS
- js圖片碎片化效果程式碼例項JS
- css3和js實現的圓形鐘錶效果程式碼例項CSSS3JS
- css3實現的動態大白效果程式碼例項CSSS3
- js點選實現多圖順序切換和迴圈切換效果程式碼JS
- javascript模擬實現滾動條效果程式碼例項JavaScript
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- css立體效果程式碼例項CSS
- js實現的div拖動效果例項程式碼JS
- js實現的元素抖動效果程式碼例項JS
- js圖片淡入淡出效果程式碼例項JS
- css3實現的折角效果程式碼例項CSSS3
- js程式碼實現的圖片水平無縫滾動JS
- css3實現的動物頭像效果程式碼例項CSSS3
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- 拖動滾動條實現div跟隨效果程式碼例項
- css3實現網狀球體效果程式碼例項CSSS3
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- CSS3 圖片由遠及近自動放大效果程式碼例項CSSS3
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- css3動態背景圖片程式碼例項CSSS3
- 美化滾動條效果程式碼例項
- js和css3實現360旋轉滾動效果JSCSSS3
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3