JavaScript無縫滾動效果的實例代碼
更新時間:2017年03月27日 11:13:27 作者:酷揚
本文給大家分享一段實例代碼有關js實現(xiàn)無縫滾動效果,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } .box { width: 600px; height: 200px; margin: 60px auto; overflow: hidden; position: relative; } ul { list-style-type: none; width: 2000px; position: absolute; top: 0; left: 0; } li { float: left; } </style> </head> <body> <div class="box" id="box"> <ul id="gun"> <li><img src="01.jpg" alt="" /></li> <li><img src="02.jpg" alt="" /></li> <li><img src="03.jpg" alt="" /></li> <li><img src="04.jpg" alt="" /></li> <li><img src="01.jpg" alt="" /></li> <li><img src="02.jpg" alt="" /></li> </ul> <script type="text/javascript"> var box = document.getElementById("box"); var gun = document.getElementById("gun"); function $(i){ return document.getElementsByTagName("img")[i]; } var num = 0; all(); function all(){ var shi= setInterval(fun,5); gun.onmouseover=function (){ clearInterval(shi); } gun.onmouseout=function (){ all(); } function fun(){ if(num<=-1200){ num=0; }else{ gun.style.left=num+"px"; num--; } } } </script> </div> </body> </html>
以上所述是小編給大家介紹的JavaScript無縫滾動效果的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
JavaScript數(shù)值千分位格式化的兩種簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄狫avaScript數(shù)值千分位格式化的兩種簡單實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08ES6知識點整理之函數(shù)對象參數(shù)默認值及其解構應用示例
這篇文章主要介紹了ES6知識點整理之函數(shù)對象參數(shù)默認值及其解構應用,結合實例形式分析了ES6函數(shù)對象參數(shù)相關使用技巧,需要的朋友可以參考下2019-04-04利用hasOwnProperty給數(shù)組去重的面試題分享
obj.hasOwnProperty(attr) 判斷是否是原型中的屬性,false就是原型中的屬性,下面這篇文章主要給大家介紹了一道利用hasOwnProperty給數(shù)組去重的面試題,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2018-11-11javascript將數(shù)字轉換整數(shù)金額大寫的方法
這篇文章主要介紹了javascript將數(shù)字轉換整數(shù)金額大寫的方法,通過自定義函數(shù)中的數(shù)組替換實現(xiàn)數(shù)字轉換整數(shù)金額大寫的功能,非常具有實用價值,需要的朋友可以參考下2015-01-01