一个滑动展示的小代码

最新推荐文章于 2021-02-16 22:56:38 发布

LonelyStark

最新推荐文章于 2021-02-16 22:56:38 发布

阅读量725

点赞数 1

分类专栏： JavaScript小代码文章标签： function timer null generator div xhtml

本文链接：https://blog.csdn.net/LonelyStark/article/details/6094321

版权

JavaScript小代码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个写给别人的小代码

顺便也贴上来

这是一个滑动展示用的小容器

通过鼠标移动和离开触发滑动效果

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>12.1</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style> #test {width:400px;height:200px;position:relative;overflow:hidden;margin:100px auto} #test div {width:190px;height:200px;position:absolute;} #d0{background:red;} #d1{background:#000;left:100px;color:#fff;} #d2{background:blue;left:200px;} #d3{background:gray;left:300px;} </style> </head> <body> <div id="test" οnmοuseοut="TestEle(this,event,ResetDiv)"> <div id="d0" οnmοuseοver="ChkDivMove(0)">一</div> <div id="d1" οnmοuseοver="ChkDivMove(1)">二</div> <div id="d2" οnmοuseοver="ChkDivMove(2)">三</div> <div id="d3" οnmοuseοver="ChkDivMove(3)">四</div> </div> <script type="text/javascript"> var $=function(id){return document.getElementById(id)}, Timer=[null,null,null,null], ODiv=[0,100,200,300], ChkDivMove=function(N){ var i=Timer.length,L=ODiv.length; while(i--){clearTimeout(Timer[i]),Timer[i]=null;} i=N; while(i>-1)LeftScrollDiv(i,70*i--); for(i=N+1;i<L;i++)RightScrollDiv(i,(i-1)*70+190); }, LeftScrollDiv=function(i,MinX){ var lx=ODiv[i]; (function(){ lx>MinX&&($('d'+i).style.left=--lx+'px',ODiv[i]=lx,Timer[i]=setTimeout(arguments.callee,1)) })(); }, RightScrollDiv=function(i,MaxX){ var lx=ODiv[i]; (function(){ lx<MaxX&&($('d'+i).style.left=++lx+'px',ODiv[i]=lx,Timer[i]=setTimeout(arguments.callee,1)) })(); }, ResetDiv=function(){ var i,lx; for(i=Timer.length;i--;){clearTimeout(Timer[i]),Timer[i]=null;} i=ODiv.length; while(--i)ODiv[i]>(lx=i*100)?LeftScrollDiv(i,lx):RightScrollDiv(i,lx) }, TestEle=function(obj, e,CallBack){ e.currentTarget?(e.relatedTarget != obj&&obj != e.relatedTarget.parentNode&&CallBack()):(e.toElement != obj&&obj != e.toElement.parentNode&& CallBack() ) } </script> </body> </html>