E-mail: Foxl@hulingweb.cn
联系我们案例演示中心服务热线:15523356218座机专线:023-68168040

狐灵科技Logo

当前位置:主页 > 网站建设 > 网络建站知识 >

Html js轻松实现 向上下左右循环滚动代码

发表日期:2019-05-06文章编辑:Smileby陌少羽浏览次数: 标签:Html,轻松,实现,向,上下左右,循环,滚动,代码,

Html js轻松实现 向上下左右循环滚动代码 代码如下



  1. <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)</title>
    </head>
    <body>
    <div id="colee" style="overflow:hidden;height:253px;width:410px;">
    <div id="colee1">
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    </div>
    <div id="colee2"></div>
    </div>
    <script>
    var speed=30;
    var colee2=document.getElementById("colee2");
    var colee1=document.getElementById("colee1");
    var colee=document.getElementById("colee");
    colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
    function Marquee1(){
    //当滚动至colee1与colee2交界时
    /*if(colee2.offsetTop-colee.scrollTop<=0){
    colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
    }else{
    colee.scrollTop++
    }*/
    //无限循环
    if(colee.scrollTop>=colee1.offsetHeight){
    colee.scrollTop=0;
    }
    else
    {
    colee.scrollTop++;
    }
    }
    var MyMar1=setInterval(Marquee1,speed)//设置定时器
    //鼠标移上时清除定时器达到滚动停止的目的
    colee.onmouseover=function() {clearInterval(MyMar1)}
    //鼠标移开时重设定时器
    colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
    </script>
    <!--向上滚动代码结束-->
    <br>
    <!--下面是向下滚动代码-->
    <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
    <div id="colee_bottom1">
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    </div>
    <div id="colee_bottom2"></div>
    </div>
    <script>
    var speed=30
    var colee_bottom2=document.getElementById("colee_bottom2");
    var colee_bottom1=document.getElementById("colee_bottom1");
    var colee_bottom=document.getElementById("colee_bottom");
    colee_bottom2.innerHTML=colee_bottom1.innerHTML
    colee_bottom.scrollTop=colee_bottom.scrollHeight
    function Marquee2(){
    if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
    colee_bottom.scrollTop+=colee_bottom2.offsetHeight
    else{
    colee_bottom.scrollTop--
    }
    }
    var MyMar2=setInterval(Marquee2,speed)
    colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
    colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
    </script>
    <!--向下滚动代码结束-->
    <br>
    <!--下面是向左滚动代码-->
    <div id="colee_left" style="overflow:hidden;width:500px;">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr><td id="colee_left1" valign="top" align="center">
    <table cellpadding="2" cellspacing="0" border="0">
    <tr align="center">
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    </tr>
    </table>
    </td>
    <td id="colee_left2" valign="top"></td>
    </tr>
    </table>
    </div>
    <script>
    //使用div时,请保证colee_left2与colee_left1是在同一行上.
    var speed=30//速度数值越大速度越慢
    var colee_left2=document.getElementById("colee_left2");
    var colee_left1=document.getElementById("colee_left1");
    var colee_left=document.getElementById("colee_left");
    colee_left2.innerHTML=colee_left1.innerHTML
    function Marquee3(){
    if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
    colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
    else{
    colee_left.scrollLeft++
    }
    }
    var MyMar3=setInterval(Marquee3,speed)
    colee_left.onmouseover=function() {clearInterval(MyMar3)}
    colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
    </script>
    <!--向左滚动代码结束-->
    <br>
    <!--下面是向右滚动代码-->
    <div id="colee_right" style="overflow:hidden;width:500px;">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr><td id="colee_right1" valign="top" align="center">
    <table cellpadding="2" cellspacing="0" border="0">
    <tr align="center">
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    </tr>
    </table>
    </td>
    <td id="colee_right2" valign="top"></td>
    </tr>
    </table>
    </div>
    <script>
    var speed=30//速度数值越大速度越慢
    var colee_right2=document.getElementById("colee_right2");
    var colee_right1=document.getElementById("colee_right1");
    var colee_right=document.getElementById("colee_right");
    colee_right2.innerHTML=colee_right1.innerHTML
    function Marquee4(){
    if(colee_right.scrollLeft<=0)
    colee_right.scrollLeft+=colee_right2.offsetWidth
    else{
    colee_right.scrollLeft--
    }
    }
    var MyMar4=setInterval(Marquee4,speed)
    colee_right.onmouseover=function() {clearInterval(MyMar4)}
    colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
    </script>
    <!--向右滚动代码结束-->
    </body>
    </html>
     
 


以上就是Html js轻松实现 向上下左右循环滚动代码的方法 大家可以新建一个html 看看效果就知道了
如没特殊注明,文章均为狐灵科技-重庆网站建设原创,转载请注明  http://www.hulingweb.cn/jzzs/346.html
相关新闻

网页预加载loading特效

什么是预加载? WEB预加载就是在网页全部加载之前,对一些主要内容进行加载,以提供给用户更好的体验,减少等待...

发布日期:07-29

网页禁止复制文本和禁止右键的方法

有时候我们做网站不想网站的内容被人轻易的拷贝 所以想禁止其他人使用右键 下面贴上代码 把下面的代码贴到html里...

发布日期:07-24

九龙坡网站建设

常见问题 九龙坡网站建设的价格是多少? 网站建设的价格是根据网站的性质,美工设计要求,功能复杂程度,客户的...

发布日期:07-22

【重庆网站优化】如何进行网站的标题优

网站标题优化,可能还有很多人不知道网站标题到底应该怎么进行优化吧,但肯定遇到过网站需要进行标题修改的情...

发布日期:07-21

  • 更多 +狐灵业务单元

    营销型网站建设 品牌创意网站 企业官方网站 上市公司网站 B2C电子商务网站 大型门户网站 专题活动网站 定制化电子商务 产品商城网站 移动手机电商网站 微信会员电商

  • 更多 +我们的优势

  • 更多 +关于狐灵

    狐灵致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发, 与其他网站建设及系统开发公司不同,我们的整合解决方案结合了狐灵网络品牌建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供一体化全方位的互联网品牌整合方案!

更多 +联系我们

服务热线:15523356218大客户专线:023-68168040

业务 QQ传真:023-68168040

售后专线15082661954售后QQ:

渠道合作邮箱Foxl@hulingweb.cn

我们的认知

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候,我们已经开始把数字化品牌建设和网络传播进行了整合。只有通过整体的互联网品牌分析,帮助企业家们进行互联网品牌建设,并传播企业品牌,并围绕品牌树立品牌价值,提升企业与用户的互相交流,与用户品牌交互,让用户能找专业的方法去解决问题。传播品牌,激起消费者品牌意识,在这过程中创造价值,这是我们成功的秘诀,也是我们帮助用户成功的诀窍,更是成就一流品牌的一条直达线。

不能否认的是,建设网站,创造互联网品牌价值的过程,是一种在互联网上艺术的行为,但互联网跟涂鸦全然不同,企业的品牌价值并不体现在希望品牌成为某个这种艺术家的作品。互联网传播的对象是用户,用户拥有自己的文化体系,群落共性才是互联网传播根本,这种传播才是互联网创造价值的体现,这种价值的体现呈现多样。空洞的好看没有实质是网站建设的闹剧,网站如果不能激发品牌价值和网络营销和帮助用户,则是网站建设的悲哀,这样的网站没有灵魂!所以,网站建设运营,网络营销必须得得人心,有非常好的用户体验,能够解决问题和需求,能够为梦想者创造和传播品牌价值,最后创造价值,狐灵与你同行!


HI,Are you ready?__合作意向表

您需要的服务*

现有网站改版
我需要做微信营销
建设全新的企业网站
要找长期合作公司,需要年度服务
我需要做购物商城
我需要做系统平台
我需要做营销型网站
我需要优化推广

您最关注的地方*

对功能要求比较高
对设计创意要求比较高
需要可以购物支付
搜索引擎排名

预算*

5千以下 1万以下 1-2万 2-3万 3-5万 5-10万 10万以上 大型项目需要招标
验证码 看不清?点击更换 看不清? 点击更换

实力实力
案例案例
方案方案
业务业务
提交需求提交需求
售前售前
售后售后
留言微信
Top