<!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. Android中使EditText失去焦点，edittext禁止弹出键盘[转]

    转自http://www.cnblogs.com/yejiurui/archive/2013/01/02/2841945.html 在我们的应用中,有时候一进入一个页面, EditText默认就会自动 ...

  2. 草稿-Hyper-V

    Hyper-V Over SMB3.0 为Hyper-v宿主机和故障转移群集做防病毒排除 微软SMB 3.0文件共享协议新特性介绍

  3. DNS的查找机制、中文扩展，及其对手机扫描商标名称的支持

    DNS的查找机制.中文扩展.及其对手机扫描商标名称的支持 DNS的查找机制 当DNS查找主机时,它首先在本域里查找,假设找不到则交给更上一级的域查找,直至顶级的域. 因此,假设计算机在北大域名(pku ...

  4. Windows XP下安装WinCE6.0开发环境

    Windows下怎样编译WinCE6.0及开发应用程序.以下介绍(安装之前必须保证C盘有足够的空间!20g左右!主要是由于在安装程序在安装过程中要解压): 在Visual Studio 2005之前, ...

  5. GDB反向调试 + 指令记录+函数历史记录

    http://blog.chinaunix.net/uid-26941022-id-3199961.html b.c void fun(int a, int b){ int c; c=a+b; } v ...

  6. lua function

    This is the main reference for the World of Warcraft Lua Runtime. Note that these are mostly standar ...

  7. Nginx vs Apache--reference

    May 14th, 2014 - By Walker Rowe https://anturis.com/blog/nginx-vs-apache/ What is the Nginx web and ...

  8. BeanUtils使用概要

    BeanUtils是apache提供的的一个工具类,在很多地方我们都要用到这个类.下面说说这个类的简单用法. 相关的使用细节已经在代码的注释中说明了. @Test public void test5( ...

  9. android开发之手势识别

    由于精确度等原因,手势识别在android中用的并不多,不过这并不妨碍我们来玩玩这个神奇的玩意. 在android中要使用手势,先得建立手势库,建立手势库非常简单,新建一个android sample ...

  10. 基础之 window-self-top-opener

    今天我都在怀疑,很多项目还用不用iframe这个框架做页面布局. 如果你有兴趣想告诉我,请给我留言. 一. 说明 注:这里top和window.top等价,window是可以省略的,有得情况下不允许省 ...