<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
        body,ul{margin: 0;padding: 0;}
        li{list-style: none;}
        body{background: url("images/bg.jpg");}
        #div1,#div4{width: 520px;background: rgba(0,255,255,0.6);height: 160px;overflow: hidden;
                    position: absolute;left: 200px;}
        #div1 ul,#div4 ul{position: absolute;left: 10px;top: 10px;}
        #div1 ul li,#div4 ul li{float: left;margin-right: 10px;width: 160px;height: 140px;
                        overflow: hidden;margin-bottom: 10px;}

#div2,#div3{width: 180px;background: rgba(0,255,255,0.6);height: 460px;overflow: hidden;
                    position: absolute;top:0px;left: 0px;}
        #div2 ul,#div3 ul{position: absolute;left: 10px;top: 10px;}
        #div2 ul li,#div3 ul li{width: 160px;height: 140px;
                        overflow: hidden;margin-bottom: 10px;}    
        #div4{bottom: 0;}
        #div3{left: 740px;}
        #scroll{width: 920px;height: 460px;position: relative;top: 130px;left: 50%;margin-left: -460px;}            
        #scroll h3{font-size: 50px;text-shadow:2px 2px 4px #f00,-2px -2px 4px #f0f,6px 6px 5px #ff0;
                    position: absolute;top: 50%;left: 50%;line-height:100px;height: 100px;
                    margin:-50px 0 0 -260px;color: rgba(255,255,255,0.6);
                    background: rgba(255,255,255,0.6);width: 520px;text-align: center;}                
    </style>
    <script type="text/javascript">
        function startScroll(id,dir,iSpeed){
            var oUl=document.getElementById(id).getElementsByTagName('ul')[0];
            oUl.innerHTML+=oUl.innerHTML;
            if (dir=="left"||dir=="right") {
                oUl.style.width=oUl.offsetWidth*2+"px";
            }
            else if(dir=="top"||dir=="bottom"){
                oUl.style.top=oUl.offsetHeight*2+"px";
            };
            
            var oTimer=null;
            oTimer=setInterval(fnScroll,30);
            oUl.onmouseover=function(){
                clearInterval(oTimer);
            }
            oUl.onmouseout=function(){
                oTimer=setInterval(fnScroll,30);
            }
            function fnScroll(){
                if (dir=="left"||dir=="right") {
                    if (oUl.offsetLeft<-oUl.offsetWidth/2) {
                        oUl.style.left=0;
                    };
                    if (oUl.offsetLeft>0) {
                        oUl.style.left=-oUl.offsetWidth/2+"px";
                    };
                    if (dir=="left") {
                        oUl.style.left=oUl.offsetLeft-Math.abs(iSpeed)+"px";
                    }else{
                        oUl.style.left=oUl.offsetLeft+Math.abs(iSpeed)+"px";
                    }
                    
                }
                else if(dir=="top"||dir=="bottom"){
                    if (oUl.offsetTop<-oUl.offsetHeight/2) {
                        oUl.style.top=0;
                    };
                    if (oUl.offsetTop>0) {
                        oUl.style.top=-oUl.offsetHeight/2+"px";
                    };
                    if (dir=="top") {
                        oUl.style.top=oUl.offsetTop-Math.abs(iSpeed)+"px";
                    }else{
                        oUl.style.top=oUl.offsetTop+Math.abs(iSpeed)+"px";
                    }
                }    
            }    
        }
        window.onload=function(){
            startScroll("div1","right",1);
            startScroll("div2","top",1);
            startScroll("div3","bottom",1);
            startScroll("div4","left",1);
        }
    </script>
</head>
<body>
<div id="scroll">
    <h3>手写JS无缝滚动插件</h3>
    <div id="div1">
        <ul>
            <li><a href="javascript:;"><img src="data:images/1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="data:images/2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="data:images/3.jpg" alt=""></a></li>
        </ul>
    </div>
    <div id="div2">
        <ul>
            <li><a href="javascript:;"><img src="data:images/1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="data:images/2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="data:images/3.jpg" alt=""></a></li>
        </ul>
    </div>
    <div id="div3">
        <ul>
            <li><a href="javascript:;"><img src="data:images/1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="data:images/2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="data:images/3.jpg" alt=""></a></li>
        </ul>
    </div>
    <div id="div4">
        <ul>
            <li><a href="javascript:;"><img src="data:images/1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="data:images/2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="data:images/3.jpg" alt=""></a></li>
        </ul>
    </div>
</div>
    
</body>
</html>

效果：

手写JS无缝滚动插件的更多相关文章

  1. 手写js面向对象选项卡插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. 前端小插件之手写js循环滚动特效

    很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...

  3. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  4. 放弃antd table，基于React手写一个虚拟滚动的表格

    缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...

  5. liMarquee – jQuery无缝滚动插件（制作跑马灯效果）

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  6. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  7. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  8. JS鼠标滚动插件scrollpath使用介绍

    JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...

  9. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

随机推荐

  1. DateTime.TryParseExact 万能时间格式转化

    本文转载:http://blog.csdn.net/gaofang2009/article/details/6073231 前天同事问C#有没有相关的方法能把"年月日时分秒"这样的 ...

  2. Kia&#39;s Calculation（贪心）

    pid=4726">http://acm.hdu.edu.cn/showproblem.php? pid=4726 大致题意:给两个长度小于10^6且相等的合法的正整数.你能够随意组合 ...

  3. mybatis10 实现类代理对象开发

    mapper实现类代理对象开发 要想让mybatis自动创建dao接口实现类的代理对象,必须遵循一些规则: SqlSession sqlSession = sqlSessionFactory.open ...

  4. hadoop错误Cannot load libcrypto.so (libcrypto.so cannot open shared object file No such file or directory)

    报如下错误 解决方法: 1.使用hadoop checknative –a命令检查,报如下错误 2.使用如下命令建立libcrypto.so文件的符号链接 如果,您认为阅读这篇博客让您有些收获,不妨点 ...

  5. android 中 ColorDrawable dw = new ColorDrawable(0x3ccccccc)，关于颜色定义的总结

    android 中  ColorDrawable dw = new ColorDrawable(0x3ccccccc),关于颜色定义的总结 0x3ccccccc 拆分开来 0x-3c-cccccc   ...

  6. microchip PIC芯片使用方法

    pickit3调试器使用: http://www.eeboard.com/evaluation/pickit3debug/1/ MPLAB环境使用: 1.代码折叠功能 2.代码补全功能 3.函数跳转功 ...

  7. Java中OutOfMemoryError(内存溢出)的情况及解决办法

    java.lang.OutOfMemoryError: Java heap space // TODO Auto-generated method stub Vector v = new Vector ...

  8. 给右键 添加dos命令

    reg add "HKEY_CURRENT_USER\Console" /v "ScreenBufferSize" /t REG_DWORD /d 655361 ...

  9. IOS多线程知识总结/队列概念/GCD/串行/并行/同步/异步

    进程:正在进行中的程序被称为进程,负责程序运行的内存分配;每一个进程都有自己独立的虚拟内存空间: 线程:线程是进程中一个独立的执行路径(控制单元);一个进程中至少包含一条线程,即主线程. 队列:dis ...

  10. C语言运算符与表达式

    1 概论 计算机内存中的数据可以通过变量,常量来表示和存储,那么这些数据如何运算? C语言中提供了大量(34种)的运算符可以用来完成数据的算术,赋值,逻辑,关系,条件判断以及自增自减运算和基于二进制的 ...