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>
  • 相关阅读:
    25、排序算法之选择法排序 (待完成)
    24、求一个3×3的整型矩阵对角线元素之和
    23、32、输入一个字符,输出其大写字符 (待完成)
    22、有一个已排好序的数组,要求输入一个数字后,按原来的排序规律将它插入数组
    21、二维数组行列转换
    20、30、用冒泡法对N个数排序--升序 (完成)
    19、求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个1~9的数字。例如2+22+222+2222+22222(此时共有5个数相加)。
    18、1-3+5-7+···-99+101等于多少
    17、反向输出
    16、判断101-200之间有多少个素数,并输出所有素数。
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5034142.html
Copyright © 2011-2022 走看看