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


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 相关文章推荐
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
裁剪字符串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
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
php统计数组元素个数的方法
2015/07/02 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
简单谈谈Python中的闭包
2016/11/30 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
在Python中表示一个对象的方法
2019/06/25 Python
python tkinter canvas使用实例
2019/11/04 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
档案管理员岗位职责
2013/12/01 职场文书
报关专员求职信范文
2014/02/22 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
医学求职自荐信
2014/06/21 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
艺术节开幕词
2015/01/28 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang