一个滑动展示的小代码

作者：lonelystar 时间：2011-07-01 12:58:05　

一个写给别人的小代码

顺便也贴上来

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

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

<!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 www.cidianwang.com</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" onmouseout="TestEle(this,event,ResetDiv)"> <div id="d0" onmouseover="ChkDivMove(0)">一</div> <div id="d1" onmouseover="ChkDivMove(1)">二</div> <div id="d2" onmouseover="ChkDivMove(2)">三</div> <div id="d3" onmouseover="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>

标签：滑动,鼠标

投稿

一个滑动展示的小代码

猜你喜欢

ASP隐藏真实文件的下载功能实现代码

如何在Access 2007数据库中添加附件

Javascript的一种模块模式

css基础教程属性篇之二

50种方法巧妙优化SQL Server数据库

服务器XMLHTTP(Server XMLHTTP in ASP)基础知识

asp代码WinHttp.WinHttpRequest.5.1使用例子

高效的删除HTML标签的函数

再读《你是一个职业的页面重构工作者吗？》

PL/SQL number型数据

javascript中类的创建和继承

解析Oracle 8i/9i的计划稳定性

CSS Hack经验总结

asp中去除html中style,javascript,css代码

Asp中Server.ScriptTimeOut属性需要注意的一点

asp使用 sql_dmo 添加新数据库代码

asp HTTP_X_FORWARDED_FOR和REMOTE_ADDR

符合网站标准的图片切换代码(天极软件)

Asp中如何设计跨越域的Cookie

百度首席设计师用户体验部总监郭宇演讲

一个滑动展示的小代码

猜你喜欢

ASP隐藏真实文件的下载功能实现代码

如何在Access 2007数据库中添加附件

Javascript的一种模块模式

css基础教程属性篇之二

50种方法巧妙优化SQL Server数据库

服务器XMLHTTP(Server XMLHTTP in ASP)基础知识

asp代码WinHttp.WinHttpRequest.5.1使用例子

高效的删除HTML标签的函数

再读《你是一个职业的页面重构工作者吗？》

PL/SQL number型数据

javascript中类的创建和继承

解析Oracle 8i/9i的计划稳定性

CSS Hack经验总结

asp中去除html中style,javascript,css代码

Asp中Server.ScriptTimeOut属性需要注意的一点

asp使用 sql_dmo 添加新数据库代码

asp HTTP_X_FORWARDED_FOR和REMOTE_ADDR

符合网站标准的图片切换代码(天极软件)

Asp中如何设计跨越域的Cookie

百度首席设计师 用户体验部总监郭宇演讲

百度首席设计师用户体验部总监郭宇演讲