<!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. 记录IOS入门的过程

    先说点私话.再进入正题吧,顺便抒发下情绪.公司传统业务不景气,而互联网正如火如荼,无奈被逼上梁山.開始学起了IOS编程.后来想想闲着也是闲着就学习学习呗.无奈公司确实不希望投入了.不愿意提供苹果电脑. ...

  2. 《Linux内核设计与实现》学习笔记之“Linux进程管理机制”

    一.进程(或者称为“任务”)简介 进程是OS最基本的抽象之一,通常进程包括“可执行程序代码”,“其他资源”(如:打开的文件,挂起的信号,内核内部数据,处理器状态,地址空间,一个或多个执行线程等) 二. ...

  3. Intra-cluster Replication in Apache Kafka--reference

    Kafka is a distributed publish-subscribe messaging system. It was originally developed at LinkedIn a ...

  4. 如何让MFC程序关闭按钮失效，也无法右击任务栏关闭窗口来关闭？

    如何让MFC程序关闭按钮失效,也无法右击任务栏关闭窗口来关闭,即右键任务栏的关闭窗口失效呢?很简单,有一个小窍门就是:响应IDCANCEL消息,具体实现如下: 首先定义消息映射:ON_BN_CLICK ...

  5. ubuntu 14.04 编译安装 nginx

    下载源码包 nginx 地址:http://nginx.org/en/download.html  下载nginx 1.4.7 编译前先安装两个包: 直接编译安装会碰到缺少pcre等问题,这时候只要到 ...

  6. 简单地使用jquery的validate

    简单地使用jquery的validate ——@梁WP 摘要:本文通过一个很简单的例子,讲解了jquery validate的最基础使用方式. 一.源代码 注意事项都写在代码的注释里了,哈哈. < ...

  7. readonly时禁用删除键，readonly按删除键后页面后退解决方案

    readonly时禁用删除键, readonly按删除键后页面后退解决方案 >>>>>>>>>>>>>>>&g ...

  8. 我的插件のinput文本框实现宽度自适应

    先来最后结果:DEMO 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <htm ...

  9. win7下配置apache和php

    1.软件装备 PHP:http://php.net/downloads.php non-thread-safe是非安全线程主要与IIS搭配环境. thread-safe安全线程与Apache搭配环境. ...

  10. 面向对象 ---Java抽象类

    在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不能实例化对象之外, ...