• [转]JS图片滚动效果

    From: http://bbs.blueidea.com/thread-2762084-1-1.html

    演示效果：http://bbs.blueidea.com/thread-2762084-1-1.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>家园网 www.wfamilies.com</title>
    <style type="text/css">
    *    {
    margin    :0;
    padding    :0;
    }
    body    {
    background    :#CCC;
    }
    /*--大块定义--*/
    #container    {
    text-align    :left;
    width    :778px;
    overflow    :hidden;
    background    :#fff;
    }
    #content    {
    width    :778px;
    }
    /*--休闲一刻--*/
    #xxyk    {
    float    :left;
    width    :778px;
    margin    :0;
    padding    :0;
    background    :#999;
    }
    #xxyk .content    {
    float    :left;
    width    :778px;
    margin    :0;
    padding    :0 0 20px 0;
    }
    #xxyk .content img    {
    border    :0;
    }
    #xxyk .content .roll    {
    width    : 750px;
    margin    :4px auto;
    padding    :0 0 0 0; 
    overflow    :hidden;
    }
    #xxyk .content .roll #main    {
    list-style    :none;
    width    :1620px;
    padding    :0;
    margin    :0;
    }
    #xxyk .content .roll #main #pic1,#xxyk .content .roll #main #pic2    {
    float    :left;
    text-align    :left;
    width    :810px;
    padding    :0;
    margin    :0;
    background    :#f90;
    }
    #xxyk .content .roll #main #pic1 a,#xxyk .content .roll #main #pic2 a    {
    display    :block;
    text-align    :center;
    color    :#FFFFFF;
    width    :135px;
    }
    #xxyk .content .roll #main #pic1 img,#xxyk .content .roll #main #pic2 img    {
    display    :block;
    clear    :both;
    width    :115px;
    height    :111px;
    margin    :0 auto 5px auto;
    padding    :0;
    }
    #xxyk .content .roll #main #pic1 ul,#xxyk .content .roll #main #pic2 ul    {
    float    :left;
    list-style    :none;
    }
    #xxyk .content .roll #main #pic1 ul li,#xxyk .content .roll #main #pic2 ul li    {
    float    :left;
    display    :block;
    margin    :0;
    padding    :0;
    }
    /*--隐藏元素--*/
    #slhdly .title,#xxyk .content ul li.more    {
    position    :absolute;
    visibility    :hidden;
    overflow    :hidden;
    display    :none;
    clip    :rect(0,0,0,0);
    height    :0;
    }
    </style>
    </head>
    <body>
    <div id="xxyk">
    <div class="content">
    <div id="pic" class="roll">
    <div id="main">
    <div id="pic1">
    <ul>
    <li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
    <li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
    <li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
    <li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
    <li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
    <li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
    </ul>
    </div>
    <div id="pic2">
    </div>
    </div>
    </div>
    <script type="text/javascript">
                     var spe=22;  /*--控制移动速度--*/
                        var m = document.getElementById("pic");
                        var m1 = document.getElementById('pic1');
                        var m2 = document.getElementById('pic2');
                    m2.innerHTML     = m1.innerHTML;
                      function Marquee()
                         {
                          if(m2.offsetWidth-m.scrollLeft<=0)
                          {
                         m.scrollLeft    -=m1.offsetWidth;
                      }
                          else
                          {
                       m.scrollLeft    ++;
                   }
               }
                         var k1;
                         function startmarquee()
                         {
                         k1    =setInterval(Marquee,spe)                 
                     }
                     window.setTimeout('startmarquee()',    1000);
               m.onmouseover    =function() {clearInterval(k1)}
               m.onmouseout    =function() {k1=setInterval(Marquee,spe)}
                       </script>
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    3.1.3、控制结构
    3.1.2、变量
    3.1.1、渲染模板
    3.1、Jinja2模板引擎
    第3章 模板
    2.6、Flask扩展
    2.5.4、响应
    2.5.3、请求钩子
    2.5.2、请求调度
    2.5.1、程序和请求上下文
  • 原文地址：https://www.cnblogs.com/SummerRain/p/799431.html
Copyright © 2020-2023  润新知