• JavaScript- 图片无缝滚动


      图片向上、向下、向左、向右不间断无缝滚动.

      图片向下滚动:

    <div id="colee" style="overflow: hidden; height: 253px;  410px;">
                <div id="colee1">
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                </div>
                <div id="colee2">
                </div>
            </div>
            <script type="text/javascript">
                var speed = 30;
                var colee2 = document.getElementById("colee2");
                var colee1 = document.getElementById("colee1");
                var colee = document.getElementById("colee");
                colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
                function Marquee1() {
                    //当滚动至colee1与colee2交界时
                    if (colee2.offsetTop - colee.scrollTop <= 0) {
                        colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
                    } else {
                        colee.scrollTop++
                    }
                }
                var MyMar1 = setInterval(Marquee1, speed)//设置定时器
                //鼠标移上时清除定时器达到滚动停止的目的
                colee.onmouseover = function () { clearInterval(MyMar1) }
                //鼠标移开时重设定时器
                colee.onmouseout = function () { MyMar1 = setInterval(Marquee1, speed) }
            </script>

      图片向下滚动

    <div id="colee_bottom" style="overflow: hidden; height: 253px;  410px;">
                <div id="colee_bottom1">
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                    <p>
                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                </div>
                <div id="colee_bottom2">
                </div>
            </div>
            <script>
                var speed = 30
                var colee_bottom2 = document.getElementById("colee_bottom2");
                var colee_bottom1 = document.getElementById("colee_bottom1");
                var colee_bottom = document.getElementById("colee_bottom");
                colee_bottom2.innerHTML = colee_bottom1.innerHTML
                colee_bottom.scrollTop = colee_bottom.scrollHeight
                function Marquee2() {
                    if (colee_bottom1.offsetTop - colee_bottom.scrollTop >= 0)
                        colee_bottom.scrollTop += colee_bottom2.offsetHeight
                    else {
                        colee_bottom.scrollTop--
                    }
                }
                var MyMar2 = setInterval(Marquee2, speed)
                colee_bottom.onmouseover = function () { clearInterval(MyMar2) }
                colee_bottom.onmouseout = function () { MyMar2 = setInterval(Marquee2, speed) }
            </script>

      图片向左滚动

    <div id="colee_left" style="overflow: hidden;  500px;">
                <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>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td id="colee_left2" valign="top">
                        </td>
                    </tr>
                </table>
            </div>
            <script>
                //使用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>

      图片向右滚动

    <!--下面是向右滚动代码-->
            <div id="colee_right" style="overflow: hidden;  500px;">
                <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td id="colee_right1" valign="top" align="center">
                            <table cellpadding="2" cellspacing="0" border="0">
                                <tr align="center">
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                    <td>
                                        <p>
                                            <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td id="colee_right2" valign="top">
                        </td>
                    </tr>
                </table>
            </div>
            <script>
                var speed = 30//速度数值越大速度越慢
                var colee_right2 = document.getElementById("colee_right2");
                var colee_right1 = document.getElementById("colee_right1");
                var colee_right = document.getElementById("colee_right");
                colee_right2.innerHTML = colee_right1.innerHTML
                function Marquee4() {
                    if (colee_right.scrollLeft <= 0)
                        colee_right.scrollLeft += colee_right2.offsetWidth
                    else {
                        colee_right.scrollLeft--
                    }
                }
                var MyMar4 = setInterval(Marquee4, speed)
                colee_right.onmouseover = function () { clearInterval(MyMar4) }
                colee_right.onmouseout = function () { MyMar4 = setInterval(Marquee4, speed) }
            </script>
  • 相关阅读:
    序列化与反序列化之Kryo
    集合框架
    dubbo配置方式简单介绍
    sql(Oracle)优化之索引
    多级反向代理下,Java获取请求客户端的真实IP地址多中方法整合
    Storm 性能优化
    web.xml配置重理解
    Java各个版本的新特性
    这两天光写shell了,再贴一段代码,以供日后参考。
    Hadoop常用操作笔记
  • 原文地址:https://www.cnblogs.com/cxeye/p/3381948.html
走看看 - 开发者的网上家园