图片无缝滚动代码(向左/向下/向上)


Posted in Javascript onApril 10, 2013

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。

在原作者的基础上做了一定修改,主要还是在样式上面,将表格更换为标签。并且将JavaScript标准化,可以在所有浏览器运行。

先了解一下对象的几个的属性: innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

图片上无缝滚动 
<style type="text/css"> 
<!-- 
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
height: 100px; 
text-align: center; 
float: left; 
} 
#demo img { 
border: 3px solid #F2F2F2; 
display: block; 
} 
--> 
</style> 
向上滚动 
<div id="demo"> 
<div id="demo1"> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
</div> 
<div id="demo2"></div> 
</div> 
<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> 
图片下无缝滚动 
<style type="text/css"> 
<!-- 
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
height: 100px; 
text-align: center; 
float: left; 
} 
#demo img { 
border: 3px solid #F2F2F2; 
display: block; 
} 
--> 
</style> 
向下滚动 
<div id="demo"> 
<div id="demo1"> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
</div> 
<div id="demo2"></div> 
</div> 
<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 
tab.scrollTop=tab.scrollHeight 
function Marquee(){ 
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时 
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端 
else{ 
tab.scrollTop-- 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 
--> 
</script> 
图片左无缝滚动 
<style type="text/css"> 
<!-- 
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
width: 500px; 
} 
#demo img { 
border: 3px solid #F2F2F2; 
} 
#indemo { 
float: left; 
width: 800%; 
} 
#demo1 { 
float: left; 
} 
#demo2 { 
float: left; 
} 
--> 
</style> 
向左滚动 
<div id="demo"> 
<div id="indemo"> 
<div id="demo1"> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
</div> 
<div id="demo2"></div> 
</div> 
</div> 
<script> 
<!-- 
var speed=10; //数字越大速度越慢 
var tab=document.getElementById("demo"); 
var tab1=document.getElementById("demo1"); 
var tab2=document.getElementById("demo2"); 
tab2.innerHTML=tab1.innerHTML; 
function Marquee(){ 
if(tab2.offsetWidth-tab.scrollLeft<=0) 
tab.scrollLeft-=tab1.offsetWidth 
else{ 
tab.scrollLeft++; 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.onmouseover=function() {clearInterval(MyMar)}; 
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
--> 
</script> 
图片右无缝滚动 
<style type="text/css"> 
<!-- 
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
width: 500px; 
} 
#demo img { 
border: 3px solid #F2F2F2; 
} 
#indemo { 
float: left; 
width: 800%; 
} 
#demo1 { 
float: left; 
} 
#demo2 { 
float: left; 
} 
--> 
</style> 
向右滚动 
<div id="demo"> 
<div id="indemo"> 
<div id="demo1"> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> 
</div> 
<div id="demo2"></div> 
</div> 
</div> 
<script> 
<!-- 
var speed=10; //数字越大速度越慢 
var tab=document.getElementById("demo"); 
var tab1=document.getElementById("demo1"); 
var tab2=document.getElementById("demo2"); 
tab2.innerHTML=tab1.innerHTML; 
function Marquee(){ 
if(tab.scrollLeft<=0) 
tab.scrollLeft+=tab2.offsetWidth 
else{ 
tab.scrollLeft-- 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.onmouseover=function() {clearInterval(MyMar)}; 
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
--> 
</script>
Javascript 相关文章推荐
JavaScript 面向对象编程(1) 基础
May 18 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
js实现京东轮播图效果
Jun 30 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
裁剪字符串trim()自定义改进版
Apr 10 #Javascript
关于JS管理作用域的问题
Apr 10 #Javascript
js异常捕获方法介绍
Apr 10 #Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 #Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 #Javascript
javascipt基础内容--需要注意的细节
Apr 10 #Javascript
使用javascipt---实现二分查找法
Apr 10 #Javascript
You might like
DSP接收机前端设想
2021/03/02 无线电
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
Python中的作用域规则详解
2015/01/30 Python
基于python实现微信模板消息
2015/12/21 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
立春观后感
2015/06/18 职场文书
九年级化学教学反思
2016/02/22 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
如何理解及使用Python闭包
2021/06/01 Python