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


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嵌套函数及闭包
Nov 09 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
说说Vuex的getters属性的具体用法
Apr 15 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
Python查看多台服务器进程的脚本分享
2014/06/11 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
机电一体化自荐信
2013/12/10 职场文书
婚内分居协议书范文
2014/11/26 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书