Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 17:37:39
original
1249 Les gens l'ont consulté

想必大家都注意到的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器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 属性指定的父坐标的宽度
复制代码 代码如下:

图片上无缝滚动

向上滚动


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



<script> <BR><!-- <BR>var speed=10; //数字越大速度越慢 <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 <BR>function Marquee(){ <BR>if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 <BR>tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 <BR>else{ <BR>tab.scrollTop++ <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 <BR>--> <BR></script>
图片下无缝滚动

向下滚动


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



<script> <BR><!-- <BR>var speed=10; //数字越大速度越慢 <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 <BR>tab.scrollTop=tab.scrollHeight <BR>function Marquee(){ <BR>if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时 <BR>tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端 <BR>else{ <BR>tab.scrollTop-- <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 <BR>--> <BR></script>
图片左无缝滚动

向左滚动



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




<script> <BR><!-- <BR>var speed=10; //数字越大速度越慢 <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; <BR>function Marquee(){ <BR>if(tab2.offsetWidth-tab.scrollLeft<=0) <BR>tab.scrollLeft-=tab1.offsetWidth <BR>else{ <BR>tab.scrollLeft++; <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)}; <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; <BR>--> <BR></script>
图片右无缝滚动

向右滚动



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




<script> <BR><!-- <BR>var speed=10; //数字越大速度越慢 <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; <BR>function Marquee(){ <BR>if(tab.scrollLeft<=0) <BR>tab.scrollLeft+=tab2.offsetWidth <BR>else{ <BR>tab.scrollLeft-- <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)}; <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; <BR>--> <BR></script>

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!