js图片无缝滚动代码

最新推荐文章于 2016-09-05 08:43:02 发布
最新推荐文章于 2016-09-05 08:43:02 发布
阅读量726 收藏
点赞数
分类专栏： JavaScript 文章标签： border function div float javascript iframe

想必大家都注意到<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 属性指定的父坐标的宽度 图片上无缝滚动

>> CODE <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.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
    tab.οnmοuseοut=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.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
    tab.οnmοuseοut=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.οnmοuseοver=function() {clearInterval(MyMar)};
    tab.οnmοuseοut=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.οnmοuseοver=function() {clearInterval(MyMar)};
    tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
    -->
    </script>


本文来自CSDN博客，出处：http://blog.csdn.net/qingflyer/archive/2009/05/25/4214296.aspx

lanpy88
关注
专栏目录
js无缝滚动代码制作js图片无缝滚动向上无缝滚动
11-17
js无缝滚动代码制作js图片无缝滚动向上无缝滚动 js无缝滚动代码制作js图片无缝滚动向上无缝滚动 js无缝滚动代码制作js图片无缝滚动向上无缝滚动
横向无缝左右滚动的JS图片展示代码
08-16
横向无缝左右滚动的JS图片展示代码
JS无缝滚动代码
weixin_33736832的博客
04-27 93
&lt;div id="demo" onmouseover="clearInterval(timer)" onmouseout="timer=setInterval(mar,30)" style="overflow:hidden; height:186px; width:180px;"&gt; &lt;div id="demo1"&gt;      000FDF0SD0FS
兼容IE与火狐的js图片无缝滚动代码.zip
最新发布
09-26
标题中的“兼容IE与火狐的js图片无缝滚动代码”是指一种JavaScript编程技术，用于创建在不同浏览器（尤其是Internet Explorer和Firefox）上都能正常工作的图片滚动效果。这种效果通常是通过让图片在用户看不到的地方...
js产品图片无缝滚动代码向左和向上图片无缝滚动代码
11-12
本文将深入讲解如何使用JS实现产品图片的向左和向上无缝滚动效果。 首先，我们需要理解无缝滚动的基本原理。它通过调整图片的显示顺序，让最后一张图片紧跟在第一张图片之后，从而在视觉上创造出无中断的滚动效果。...
图片无缝滚动插件上下左右图片无缝滚动代码.zip
07-11
这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现这种效果的JavaScript代码。以下是关于这个插件及其相关技术的知识点详解： 1. **JavaScript基础**：无缝滚动效果主要依赖...
滚动字幕制作手册
心似海
05-16 208
摘自：http://www.free59.cn/article/sort014/sort017/info-1580.html :滚动字幕会让很多人感到兴奋，特别是第一次使用滚动字幕时，会爱不释手。滚动字幕我也做得不少了，对它也不会兴奋了，所以现在也用得不多了。有不少朋友常问到这是怎么做的，现在做一个详细的专题，让你更全面地了解一下。  滚动字幕在FrontPage的组件里有，但是FrontPa...
滚动字幕（水平和垂直）
01-22
水平，垂直的滚动字幕：（可设置属性：点击暂停，水平垂直，速度，次数，文字内容，文字颜色，文字大小等。。。）
jquery滚动字幕
07-31
jquery实现的滚动字幕。　
滚动字幕代码
05-04
滚动字幕代码，各种各样的滚动字幕，欢迎下载。
HTML字幕滚动效果
11-01
使用HTML可以实现字幕滚动效果，代码特别简单但是为我们的系统增添了不少色彩。
滚动字幕源代码
11-28
滚动字幕源代码
滚动字幕
Holothurian
09-05 534
设置滚动字幕也即是持续改变frame的原点位置，设置定时器，持续移动位置。
滚动字幕的源代码（可作滚动公告）
Joysing的博客
01-20 551
1*字体颜色可变幻的滚动字幕源代码：<DIVstyle="FILTER:glow(color=#000000,strength=1);COLOR:#000000;HEIGHT:10px"><FONTsize=3> <MARQUEEstyle="WIDTH:213px;HEIGHT:120px"scrollAmount=1scrollDe...
网页滚动字幕
方儿的专栏
07-27 1467
滚动字幕会让很多人感到兴奋，特别是第一次使用滚动字幕时，会爱不释手。滚动字幕我也做得不少了，对它也不会兴奋了，所以现在也用得不多了。有不少朋友常问到这是怎么做的，现在做一个详细的专题，让你更全面地了解一下。  滚动字幕在FrontPage的组件里有，但是FrontPage这个软件只能支持单行文字，一出现多行文字它就无能为力了，而且它只能支持一行滚动！(如果出现只能滚动一行的情况，解决办法是把这段代
用js实现字幕滚动效果.
Welcome to Chandler.C's blog
11-23 5547
"http://www.w3.org/TR/html4/loose.dtd">无标题文档 链接一 链接二 链接三链接四 　　　　　　　　　　marqueesWidth=500; //内容区宽度度　　　　stopscroll=false; //这个变量控制是否停止滚动　　　　with(marquees){　　　　noWrap=true; //这句表内容区不自动换行　　　　style.width=m
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值