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>
  • 相关阅读:
    x01.os.17: 换心术
    x01.os.16: 添加功能
    x01.os.15: 看上去很美
    JVM 栈帧之操作数栈与局部变量表
    IDEA字节码学习查看神器jclasslib bytecode viewer介绍
    java上下文Context类
    UML ——区分类图中的几种关系.md
    UML ——六种依赖关系.md
    JDK动态代理[1]----代理模式实现方式的概要介绍
    java方法句柄-----5.Method Handles in Java
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5034142.html
Copyright © 2011-2022 走看看