<!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. 如何屏蔽Button setClickable与setEnabled

    今天想让按键暂时无效,满足一定条件下才可以被用户按到.最初以为是setClickable,谁知搞错了.请看手册: 复制代码代码如下: public void setClickable (boolean ...

  2. TimeUnit(转)

    java.util.concurrent并发库是JDK1.5新增的,其作者是Doug Lea ,此人是个BOSS级别的天才人物了.有了他提供的类库,使得我们对多线程并发.锁有了很大的帮助,减少了并发难 ...

  3. STM32的优先级NVIC_PriorityGroupConfig的理解及其使用

    写作原由:因为之前有对stm32 优先级做过研究,但是没时间把整理的东西发表,最近项目需要2个串口,但是不是两个串口同时使用,只是随机使用其中一个,程序对2个串口的优先级需要配置: 此文思路:“中断优 ...

  4. Shell变量命名规则

    变量与变量内容以一个等号『=』来连结,如下所示: 『myname=chenfei0801』 等号两边不能直接接空格符,如下所示为错误: 『myname = chenfei0801』或『myname=c ...

  5. 【Android】数据库的简单应用——创建数据库

    SQLiteOpenHelper是一个抽象类,要使用它必须写一个类继承它.SQLiteOpenHelper有两个抽象方法onCreate()和onUpgrade(),我们要在类里面重写这两个方法来实现 ...

  6. linux bash下 快捷键

    c + a # 光标跳转到最左 c + e # 光标跳转到最后 c + w # 删除最后输入的单词 c + u # 删除整行 c + k # 删除光标到末尾 c + l # 清屏 c + z # 挂起 ...

  7. linux下安装apache2.2.27

    1.首先下载httpd-2.2.27.tar.gz用linux命令下载 wget http://mirrors.cnnic.cn/apache//httpd/httpd-2.2.27.tar.gz 2 ...

  8. PGsql解决时差24H

    SELECT sa_ed_time, sa_st_time, case when sa_ed_time > sa_st_time then extract(EPOCH FROM (sa_ed_t ...

  9. # Day04-Android

    Day04-Android 标签(空格分隔): andrroid 1.制作界面 2.在写Activity. Logcat LayoutInflate把Xml转换纯成View的工具. 自定义吐司 Lay ...

  10. SHELL:Find Memory Usage In Linux (统计每个程序内存使用情况)

    转载一个shell统计linux系统中每个程序的内存使用情况,因为内存结构非常复杂,不一定100%精确,此shell可以在Ghub上下载. [root@db231 ~]# ./memstat.sh P ...