js 无缝滚动效果学习
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equiv= "Content-type" content= "text/html; charset=utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" > <meta name= "apple-mobile-web-app-capable" content= "yes" /> <META HTTP-EQUIV= "Pragma" CONTENT= "no-cache" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge" /> <script type= "text/javascript" src= "../dist/zepto.js" ></script> </head> <body> <style type= "text/css" > #ScrollContainer{ overflow: hidden; width: 500px; } #Container{ float: left; width: 800%; } #detail{ float: left; } #detailview{ float: left; } </style> <div id= "ScrollContainer" > <div id= "Container" > <div id= "detail" > </div> <div id= "detailview" ></div> </div> </div> <script> ( function (Scroll,Container,detail){ //nowmyMarquee.run(); })( "ScrollContainer" , "Container" , "detail" ) function myMarquee(Scroll,Container,detail){ console.log( this ); var that= this ; this .speed=10; this .tabScroll=document.getElementById(Scroll); this .tabdetail=document.getElementById(detail); this .tabdetailView=document.getElementById(detail+ 'view' ); this .tabdetailView.innerHTML= this .tabdetail.innerHTML; this .Marquee= function (){ if ( this .tabdetailView.offsetWidth- this .tabScroll.scrollLeft<=0) { //一轮滚动结束需要充值 this .tabScroll.scrollLeft-= this .tabdetail.offsetWidth; } else { this .tabScroll.scrollLeft++; }; }; this .tabdetail.onmouseover= function (){ clearInterval(that.MyMar) }; this .tabdetail.onmouseout= function (){ that.MyMar=setInterval( function (){ that.Marquee.apply(that)} , that.speed); } this .run= function (){ this .MyMar=setInterval( function (){ that.Marquee.apply(that)} , that.speed); } this .run(); } var nowmyMarquee= new myMarquee( "ScrollContainer" , "Container" , "detail" ) </script> </body> </html> |
offsetWidth 和 scrollLeft 的应用 和子容器800%与父容器的使用
参考 http://blog.csdn.net/xuantian868/article/details/3116442
obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。
3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.
scrollLeft 主要用来定位子容器在父容器中的定位,控制子容器的位置
test
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步