AutoCAD
3DMAX
C语言
Pro/E
UG
JAVA编程
PHP编程
Maya动画
Matlab应用
Android
Photoshop
Word
Excel
flash
VB编程
VC编程
Coreldraw
SolidWorks
A Designer
Unity3D
AE教程
Delphi
C++
汇编语言
数据结构
软件工程
ASP编程
JSP
JavaScript
XML
SQL Server
ACCESS
MySQL
速读教程
IQ智商
记忆力
口才教程
学习方法
软件工程
ASP编程
JSP
JavaScript
XML
html游戏
ACCESS
MySQL
首页
>
JavaScript
收集整理的四个方向的滚动
51自学网
http://www.wanshiok.com
收集整理的四个方向的滚动
向上滚动
</P><P><div id=demo style=overflow:hidden;height:100;width:90; background:#214984;color:#ffffff> <div id=demo1> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> </div> <div id=demo2></div> </div> <script> var speed=30 demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2 function Marquee(){ //当滚动至demo1与demo2交界时 if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端 else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed)//设置定时器 //鼠标移上时清除定时器达到滚动停止的目的 demo.onmouseover=function() {clearInterval(MyMar)} //鼠标移开时重设定时器 demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} </script> </P><P>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
向下滚动
</P><P> <div id=demo style=overflow:hidden;height:100;width:90; background:#214984;color:#ffffff> <div id=demo1> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> <img src="/logos.gif"> </div> <div id=demo2></div> </div> <script> var speed=30 demo2.innerHTML=demo1.innerHTML demo.scrollTop=demo.scrollHeight function Marquee(){ if(demo1.offsetTop-demo.scrollTop>=0) demo.scrollTop+=demo2.offsetHeight else{ demo.scrollTop-- } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> </P><P>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
向左滚动
</P><P><div id="demo" style="overflow:hidden;width:670px;color:#ffffff;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="demo1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><img src="/logos.gif" width="88"></td> <td><img src="/logos.gif" width="88"></td> <td><img src="/logos.gif" width="88"></td> <td><img src="/logos.gif" width="88"></td> <td><img src="/logos.gif" width="88"></td> </tr> </table> </td> <td id="demo2" valign="top"></td> </tr> </table> </div> <script> var speed=1//速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script></P><P>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
向右滚动
</P><P><div id="demo" style="overflow:hidden;width:670px;color:#ffffff;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="demo1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><img src="/logos.gif" width="88"></td> <td><img src="/logos.gif" width="88"></td> <td><img src="/logos.gif" width="88"></td> <td><img src="/logos.gif" width="88"></td> <td><img src="/logos.gif" width="88"></td> </tr> </table> </td> <td id="demo2" valign="top"></td> </tr> </table> </div> <script> var speed=1//速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo.scrollLeft<=0) demo.scrollLeft+=demo2.offsetWidth else{ demo.scrollLeft-- } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script></P><P>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
收集整理的四个方向的滚动
jQuery oLoader实现的加载图片和页面效果
PHP+jQuery+Ajax实现多图片上传效果
Javascript URI 解析介绍
Javascript中this关键字的一些小知识
Javascript中的高阶函数介绍
Javascript中的call()方法介绍
Javascript中的Callback方法浅析
Javascript中的apply()方法浅析
Javascript中的方法链（Method Chaining）介绍
Javascript中的匿名函数与封装介绍
上一篇：
JavaScript对象的基础知识
下一篇：
JS中正则表达式全局匹配模式 /g用法详解
分享到：
QQ空间
新浪微博
腾讯微博
人人网
网易微博
CAD教程
教师招聘
招聘信息
51自学网 我要自学网视频教程,视频下载 自学网 自学编程网 CAD自学网 PS自学网 www.wanshiok.com
网站地图
