zoukankan      html  css  js  c++  java
  • Div+Css+JS替代Marquee滚动效果(上)、左右滚动

    简介:图片滚动展示在企业站中很经常用到. 虽然Marquee可以实现. 但是鼠标悬停,滚动停止等效果就不是很好实现了! 
    
    此滚动支持 火狐 IE  Opera
    
    <!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=utf-8" />
        <title>Div+Css+JS替代Marquee滚动效果(上) -- 无缝滚动</title>
        <style type="text/css">
            .Mar
            {
                background: #FFF;
                overflow: hidden;
                border: 1px dashed #CCC;
                width: 800px; /*页面滚动需要显示的宽度*/
            }
            .Mar img
            {
                border: 3px solid #F2F2F2;
                width: 124px;
                height: 93px;
            }
            .inMar
            {
                float: left;
                width: 3500px; /*能在一行放下所有滚动的图片的总宽度*2   像素值或者百分比*/
            }
        </style>
    </head>
    <body>
        <div id="Mar" class="Mar">
            <div id="inMar" class="inMar">
                <div id="Mar1" style="float:left;">               
                    <table border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg"/><br />轿车:1</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg"/><br />轿车:2</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg"/><br />轿车:3</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg" /><br />轿车:4</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg" /><br />轿车:5</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg"/><br />轿车:6</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg"/><br />轿车:7</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg"/><br />轿车:8</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg"/><br />轿车:9</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg"/><br />轿车:10</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg"/><br />轿车:11</td>
                            <td><img src="http://www.ln2car.com/upload/usedcarsell/2010-03-29/ee6a7a5e-db5f-4c9e-8c5f-3a3edfde0f40.jpg_tbi2.jpg"/><br />轿车:12</td>
                          </tr>
                        </table>
    
    
                </div>
                <div id="Mar2" style="float:left;">
                </div>
            </div>
        </div>
    
        <script language="javascript" type="text/javascript">
            var speed = 12; //数字越小速度越快
            var div = document.getElementById("Mar");
            var div1 = document.getElementById("Mar1");
            var div2 = document.getElementById("Mar2");
            div2.innerHTML = div1.innerHTML;
            function Marquee() {
                //向右滚动
                //if (div.scrollLeft <= 0)
                //div.scrollLeft += div2.offsetWidth
                //else {
                //div.scrollLeft--
                //}
                //向左滚动
                if (div2.offsetWidth - div.scrollLeft <= 0)
                    div.scrollLeft -= div1.offsetWidth
                else {
                    div.scrollLeft++;
                }
            }
            var MyMarquee = setInterval(Marquee, speed);
            div.onmouseover = function() { clearInterval(MyMarquee) };
            div.onmouseout = function() { MyMarquee = setInterval(Marquee, speed) };
        </script>
    
    </body>
    </html>
    
    
  • 相关阅读:
    网络七层
    微信小程序开发工具 常用快捷键
    BZOJ 1026 windy数 (数位DP)
    BZOJ 1026 windy数 (数位DP)
    CodeForces 55D Beautiful numbers (SPOJ JZPEXT 数位DP)
    CodeForces 55D Beautiful numbers (SPOJ JZPEXT 数位DP)
    HDU 3709 Balanced Number (数位DP)
    HDU 3709 Balanced Number (数位DP)
    UVA 11361 Investigating Div-Sum Property (数位DP)
    UVA 11361 Investigating Div-Sum Property (数位DP)
  • 原文地址:https://www.cnblogs.com/shuyu/p/1708198.html
Copyright © 2011-2022 走看看