<!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. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

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

  3. cocos2dx手写js绑定C++

    这两天连续查阅了js绑定c++的非常多文章  , 有手动与自己主动两种方式 . 本来想用自己主动绑定的 , 可是NDK一直下载不下来.....就给算了 . 以下总结一下手动绑定的实现过程 : 一共三步 ...

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

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

  5. 手写js代码（一）javascript数组循环遍历之forEach

    注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...

  6. js面向对象选项卡

    window.onload=function() //面向对象 { var tab=new tabSwitch("div1"); var tab=new tabSwitch(&qu ...

  7. js 面向对象选项卡

      <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" conte ...

  8. 原生js面向对象编程-选项卡(点击)

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

  9. JS面向对象（1）——构造函数模式和原型模式

    1.构造函数模式 构造函数用来创建特定的类型的对象.如下所示: function Person(name,age,job){ this.name=name; this.job=job; this.ag ...

随机推荐

  1. HTML里面Textarea换行总结

    近期碰到一个数据转来转去转到Textrea里面能否真正按行存放的问题,在这里总结一下:   问题描写叙述: 比方get数据到一个TextArea里面,如“AAA BBB”,想把这段文字在TextAre ...

  2. Eclipse Key Shortcuts for Greater Developers Productivity--reference

    Posted by Ajitesh Kumar / In Java / June 6, 2014 http://vitalflux.com/eclipse-key-shortcuts-greater- ...

  3. 今天给大家分享一下Android中的资源与国际化的问题

    摘要:该文章将向大家分享Android中的资源与国际化的问题. 今天给大家分享一下Android中的资源与国际化的问题,通常我们新建一个Android工程,目录结构如下图所示: 我们主要看一下layo ...

  4. RHEL7单独安装图形X11

    RHEL7 默认是最小化安装(Minimal Install),没有图形界面,我们应该选择Server with GUI.若已错过此步骤,我们采用以下方式补充安装GUI界面. # yum group ...

  5. 数字证书简介及Java编码实现

    1.数字证书简介 数字证书具备常规加密解密必要的信息,包含签名算法,可用于网络数据加密解密交互,标识网络用户(计算机)身份.数字证书为发布公钥提供了一种简便的途径,其数字证书则成为加密算法以及公钥的载 ...

  6. json 是什么

    怎么学习一个知识? 首先要提出几个问题,目前认为json是个什么,json是谁创造的,为什么而出现的,但是目前仅有很长时间之前别人直接告诉我的,json用来存数据的,对于使用也忘记的差不多了,所以现在 ...

  7. javascript 【js‘s word】

    http://mp.weixin.qq.com/s?__biz=MjM5MzY2NDY0Ng==&mid=214013689&idx=1&sn=21e03f6c7bf73893 ...

  8. PHP in_array不兼容问题

    做过日本的手机端,就因为in_array这个方法在我的环境下没有问题 结果到日本那边就是出问题,一直纠结的我啊,现在特贴出当初的兼容方法 function in_into($key,$array){  ...

  9. (转)C# NameValueCollection集合

    1.NameValueCollection类集合是基于 NameObjectCollectionBase 类. 但与 NameObjectCollectionBase 不同,该类在一个键下存储多个字符 ...

  10. asp.net之动态页面和静态页面的区别

    asp.net之动态页面和静态页面的区别 当我开始接触web开发的时候,首先学到的是html.css.js这一类网页语言,通过布局可以搭建出一个静态网站,效果也跟我们上网时经常看到的一些网站一样了.于 ...