无缝滚动
2015-06-15 18:05
369 查看
本文主要介绍,向上的无缝滚动
方法一:
方法二:
两种方式的不同之处就在于javascript中的tab.scrollTop跳转,方法二主要是克隆了demo1,使得在出现某些状况的时候(网速卡等),在一定时间里能够使滚动看起来仍然可以是无缝滚动。
方法一:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片滚动</title> </head> <body> <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; margin-top:90px; height: 300px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block;} --> </style> <div id="demo"> <div id="demo1"> <a href="#"><img src="../img/12.jpg" border="0" /></a> <a href="#"><img src="../img/22.jpg" border="0" /></a> <a href="#"><img src="../img/21.jpg" border="0" /></a> </div> </div> <script> <!-- var speed=10; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); function Marquee(){ if(tab1.offsetHeight-tab.scrollTop<=0){//当滚动至demo1底部时 tab.scrollTop=0; //demo跳到最顶端 } else{ tab.scrollTop++ } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 --> </script> </body> </html>
方法二:
<script> <!-- var speed=10; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 function Marquee(){ if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 else{ tab.scrollTop++ } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 --> </script>
两种方式的不同之处就在于javascript中的tab.scrollTop跳转,方法二主要是克隆了demo1,使得在出现某些状况的时候(网速卡等),在一定时间里能够使滚动看起来仍然可以是无缝滚动。
相关文章推荐
- Swap Nodes in Pairs
- Swap Nodes in Pairs
- 整合 ucenter 注册自动激活
- OpenWrt Web 开发 LuCI框架 lua语言
- 整合 ucenter 注册自动激活
- SHELL学习--shell脚本基础知识
- 打地鼠 java
- boost 线程、互斥体、条件变量
- Kotlin教程学习-HelloWorld
- margin负值
- SharePoint 2013 On Azure 解决 SCRIPT5: Access is denied. 问题
- java重载疑惑
- qml 嵌套到 qt的对话框上
- Git的使用(一)——Git的安装和配置
- EditText输入监听
- 最小二乘的理论依据
- js判断是否为IE浏览器
- SpringMVC中使用@ResponseBody注解返回值,Ajax取得中文乱码解决方法
- C#事件机制
- 使用springAOP时没有引入aopalliance包时报的错