zoukankan      html  css  js  c++  java
  • 滚动文字图片

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>不间断图片滚动在线演示 DIVCSS5</title>
    <script src="jquery-1.8.3.min.js" type="text/javascript" ></script>
    <style type="text/css">
    #demo {

    background: #FFF;

    overflow: hidden;

    border: 1px dashed red;

    500px;

    }

    #demo img {

    border: 3px solid #F2F2F2;

    }

    #indemo {

    float: left;

    200%;

    }

    #demo1 {

    float: left;

    }
    .aimg{ 80px; height: 40px;}
    #demo2 {

    float: left;

    }


    </style>
    </head>
    <body>
    <div id="demo">

    <div id="indemo">

    <div id="demo1">
    <span>dlfsdklfjslkfjskljflksjfls的房间里开始减肥路上看到就发了多少减肥了</span>

    <!-- <a href="#"><img class="aimg" src="*.png" border="0" /></a> 图片也是同理 -->



    </div>

    <div id="demo2"></div>

    </div>

    </div>
    </body>
    <script>

    var speed=8; //数字越大速度越慢

    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>
    </html>

  • 相关阅读:
    HDU 1022 Train Problem I
    HDU 1702 ACboy needs your help again!
    HDU 1294 Rooted Trees Problem
    HDU 1027 Ignatius and the Princess II
    HDU 3398 String
    HDU 1709 The Balance
    HDU 2152 Fruit
    HDU 1398 Square Coins
    HDU 3571 N-dimensional Sphere
    HDU 2451 Simple Addition Expression
  • 原文地址:https://www.cnblogs.com/gerry/p/11712132.html
Copyright © 2011-2022 走看看