• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    div图片marquee无缝连接实现代码

    复制代码
    代码如下:

    <html>
    <head>
    <style type="text/css">
    <!--
    #demo {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #98CBFF;
    margin-bottom: 10px;
    margin-left: 5px;
    overflow: hidden;
    padding: 0 0 5px;
    width: 948px;
    }
    #demo img {
    border: 3px solid #F2F2F2;
    }
    #indemo {
    float: left;
    width: 800%;
    }
    #demo1 {
    float: left;
    }
    #demo2 {
    float: left;
    }
    .box {
    border: 1px solid #98CBFF;
    float: left;
    margin: 7px 10px;
    overflow: hidden;
    padding: 5px;
    width: 150px;
    }
    -->
    </style>
    </head>
    <body>

    图片向左无缝滚动
    向左滚动

    复制代码
    代码如下:

    <div id="demo">
    <div id="indemo">
    <div id="demo1">
    <div class="box">
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <p>你号</p>
    hello
    </div>
    <div class="box">
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <p>白痴</p>
    stupid
    </div>
    <div class="box">
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    </div>
    </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>
    </body>
    </html>
    上一篇:设置table中的宽度不随文字改变让其固定
    下一篇:div怎样在object上面显示不被object动画给遮挡
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    div图片marquee无缝连接实现代码 div,图片,marquee,无缝,连接,