注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦想心扉

梦欣的天空有一个梦飞的我,

 
 
 

日志

 
 
关于我

曾经年少爱追梦,一心只想往前飞.我的大学生活如此美好,生活是如此美妙,梦欣的天空有一个梦飞的我.希望在半个月后可以梦想欣飞!

网易考拉推荐

图片无缝滚动代码  

2009-09-29 22:43:32|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

想必大家都注意到<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.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>


 

  评论这张
 
阅读(6)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017