zoukankan      html  css  js  c++  java
  • 照片无缝滚动

    <html>
    <head>
        <title>无缝滚动图片</title>
        <script type="text/javascript" src="jquery-1.7.1.min.js">
        </script></head>
    <body>
        <!--以下是向左滚动代码-->
        <div id="colee_left" style="overflow:hidden;730px;">
            <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 style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
                                <td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
                                <td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
                                <td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
                                <td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
                            </tr>
                        </table>
                    </td>
                    <td id="colee_left2" valign="top"></td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">
            if ($("#colee_left1 img").length > 4) {
                clearInterval(MyMar3);
                //使用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>
        <!--结束离开滚动码-->
    </body>
    </html>
  • 相关阅读:
    [转]实习生需要懂的40大基本规矩
    [转]Linux下pppoe配合Drcom插件上网方法介绍......
    收藏一些图书
    [转]30个自我提升技巧
    [转]关于Gmail打不开的解决办法
    [转]李开复经典语录盘点:人生之路在于每次的选择
    [转]哈佛管理世界中智慧
    胡伟武校友在2011年中国科大本科生毕业典礼暨学位授予仪式上的讲话
    Dynamics4.0和Dynamics2011处理Email的方法
    JS实现简单的ToolTip功能
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5034142.html
Copyright © 2011-2022 走看看