Js上下左右无缝隙滚动代码

转载：http://www.cnblogs.com/chenjt/p/4193464.html

主要用到dom.offsetWidth 这个表示实际的宽度。

dom.scrollLeft 这个表示这个容器dom的滚动条的水平偏移.

核心代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)</title>

</head>

<body>

<div id="colee" style="overflow:hidden;height:253px;width:410px;">

    <div id="colee1">

    <p><img src="http://www.le.com/favicon.ico"></p>

    <p><img src="http://www.le.com/favicon.ico"></p>

    <p><img src="http://www.le.com/favicon.ico"></p>

    <p><img src="http://www.le.com/favicon.ico"></p>

    <p><img src="http://www.le.com/favicon.ico"></p>

    <p><img src="http://www.le.com/favicon.ico"></p>

    <p><img src="http://www.le.com/favicon.ico"></p>

    <p><img src="http://www.le.com/favicon.ico"></p>

    </div>

    <div id="colee2"></div>

</div>

<script>

var speed=;

var colee2=document.getElementById("colee2");

var colee1=document.getElementById("colee1");

var colee=document.getElementById("colee");

colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2

function Marquee1(){

    //当滚动至colee1与colee2交界时

    if(colee2.offsetTop-colee.scrollTop<=){

    colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端

    }else{

    colee.scrollTop++

    }

}

var MyMar1=setInterval(Marquee1,speed)//设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

colee.onmouseover=function() {clearInterval(MyMar1)}

//鼠标移开时重设定时器

colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}

</script>

<!--向上滚动代码结束-->

<br>

<div style="height: 100px;background: pink;">这个上下之间的空白，</div>

<!--下面是向下滚动代码-->

<div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">

<div id="colee_bottom1">

<p><img src="http://www.le.com/favicon.ico"></p>

<p><img src="http://www.le.com/favicon.ico"></p>

<p><img src="http://www.le.com/favicon.ico"></p>

<p><img src="http://www.le.com/favicon.ico"></p>

<p><img src="http://www.le.com/favicon.ico"></p>

<p><img src="http://www.le.com/favicon.ico"></p>

<p><img src="http://www.le.com/favicon.ico"></p>

<p><img src="http://www.le.com/favicon.ico"></p>

<p><img src="http://www.le.com/favicon.ico"></p>

</div>

<div id="colee_bottom2"></div>

</div>

<script>

var speed=;

var colee_bottom2=document.getElementById("colee_bottom2");

var colee_bottom1=document.getElementById("colee_bottom1");

var colee_bottom=document.getElementById("colee_bottom");

colee_bottom2.innerHTML=colee_bottom1.innerHTML

colee_bottom.scrollTop=colee_bottom.scrollHeight

function Marquee2(){

if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=)

colee_bottom.scrollTop+=colee_bottom2.offsetHeight

else{

colee_bottom.scrollTop--

}

}

var MyMar2=setInterval(Marquee2,speed)

colee_bottom.onmouseover=function() {clearInterval(MyMar2)}

colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}

</script>

<!--向下滚动代码结束-->

<br>

<!--下面是向左滚动代码-->

<div id="colee_left" style="overflow:hidden;width:252px;">

<table cellpadding="" cellspacing="" border="">

<tr><td id="colee_left1" valign="top" align="center">

<table cellpadding="" cellspacing="" border="">

<tr align="center">

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

</tr>

</table>

</td>

<td id="colee_left2" valign="top"></td>

</tr>

</table>

</div>

<script>

//使用div时，请保证colee_left2与colee_left1是在同一行上.

var speed=;//速度数值越大速度越慢

var colee_left2=document.getElementById("colee_left2");

var colee_left1=document.getElementById("colee_left1");

var colee_left=document.getElementById("colee_left");

colee_left2.innerHTML=colee_left1.innerHTML

function Marquee3(){

    if(colee_left2.offsetWidth-colee_left.scrollLeft<=){//offsetWidth 是对象的可见宽度

        colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度

    }

    else{

        colee_left.scrollLeft++;

        console.log("colee_left.scrollLeft"+colee_left.scrollLeft);

    }

}

var MyMar3=setInterval(Marquee3,speed)

colee_left.onmouseover=function() {clearInterval(MyMar3)}

colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

</script>

<!--向左滚动代码结束-->

<br>

<!--下面是向右滚动代码-->

<div id="colee_right" style="overflow:hidden;width:252px;">

<table cellpadding="" cellspacing="" border="">

<tr><td id="colee_right1" valign="top" align="center">

<table cellpadding="" cellspacing="" border="">

<tr align="center">

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

<td><p><img src="http://www.le.com/favicon.ico"></p></td>

</tr>

</table>

</td>

<td id="colee_right2" valign="top"></td>

</tr>

</table>

</div>

<script>

var speed=;//速度数值越大速度越慢

var colee_right2=document.getElementById("colee_right2");

var colee_right1=document.getElementById("colee_right1");

var colee_right=document.getElementById("colee_right");

colee_right2.innerHTML=colee_right1.innerHTML

function Marquee4(){

if(colee_right.scrollLeft<=)

colee_right.scrollLeft+=colee_right2.offsetWidth

else{

colee_right.scrollLeft--

}

}

var MyMar4=setInterval(Marquee4,speed)

colee_right.onmouseover=function() {clearInterval(MyMar4)}

colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}

</script>

<!--向右滚动代码结束-->

</body>

</html>

我自己写的发现向上没有使用offsetTop也行，反正原理都是等scrollTop和第一个的位移一样的时候，把scrollTop=0就行。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

       *{margin:0;padding: 0}

             #yan>div>div{

                  display: inline-block;

          }

        #yan ul li {

            display: inline-block;

        }

    </style>

</head>

<body>

<div id="yan" style="width:320px; overflow: hidden;">

    <div style="width:644px; ">

    <div id="yan1">

        <ul>

            <li><img src="http://www.le.com/favicon.ico"></li>

            <li><img src="http://www.le.com/favicon.ico"></li>

            <li><img src="http://www.le.com/favicon.ico"></li>

            <li><img src="http://www.le.com/favicon.ico"></li>

            <li><img src="http://www.le.com/favicon.ico"></li>

            <li><img src="http://www.le.com/favicon.ico"></li>

            <li><img src="http://www.le.com/favicon.ico"></li>

            <li><img src="http://www.le.com/favicon.ico"></li>

            <li><img src="http://www.le.com/favicon.ico"></li>

        </ul>

    </div>

    <div id="yan2">

    </div>

    </div>

</div>

<hr/>

<div id="shang" style="height:306px; overflow-y: hidden;">

    <div style="height:612px; ">

        <div id="shang1">

            <ul>

                <li><img src="http://www.le.com/favicon.ico"></li>

                <li><img src="http://www.le.com/favicon.ico"></li>

                <li><img src="http://www.le.com/favicon.ico"></li>

                <li><img src="http://www.le.com/favicon.ico"></li>

                <li><img src="http://www.le.com/favicon.ico"></li>

                <li><img src="http://www.le.com/favicon.ico"></li>

                <li><img src="http://www.le.com/favicon.ico"></li>

                <li><img src="http://www.le.com/favicon.ico"></li>

                <li><img src="http://www.le.com/favicon.ico"></li>

            </ul>

        </div>

        <div id="shang2">

        </div>

    </div>

</div>

<script type="text/javascript">

    var box1 = document.querySelector("#yan1");

    var box2 = document.querySelector("#yan2");

    var box =  document.querySelector("#yan");

    box2.innerHTML = box1.innerHTML;

    //向左

    function  left(){

        if(box2.offsetWidth - box.scrollLeft <=0){

            box.scrollLeft -=  box1.offsetWidth;

        }else{

            box.scrollLeft++;

        }

    }

    //向右

    function  right(){

        if(box.scrollLeft <=0){

            box.scrollLeft +=  box1.offsetWidth;

        }else{

            box.scrollLeft--;

        }

    }

    //向上

    /*function  top(){

        if(box.scrollLeft <=0){

            box.scrollLeft +=  box1.offsetWidth;

        }else{

            box.scrollLeft--;

        }

    }*/

    var shang1 = document.querySelector("#shang1");

    var shang2 = document.querySelector("#shang2");

    var shang =  document.querySelector("#shang");

    shang2.innerHTML = shang1.innerHTML;

    shang.scrollTop =  shang1.offsetHeight;

    //向下

    function  down(){

        if(shang.scrollTop <=0){

            shang.scrollTop+=  shang1.offsetHeight;

        }else{

            shang.scrollTop--;

        }

    }

    //向上

    function  up(){

        if(shang1.offsetHeight - shang.scrollTop <=0){

            shang.scrollTop -=  shang1.offsetHeight;

        }else{

            shang.scrollTop++;

        }

    }

    setInterval(up,20);

</script>

</body>

</html>

这里我们需要知道offsetTop offsetHeight scrollTop的区别

1、scrollTop：https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop

比较容易理解，一个可读写的属性

1）element.scrollTop 返回该元素当前垂直滚动的距离，比如100（无单位）

2）element.scrollTop = 100 将该元素垂直滚动的距离设置为100，注意100为绝对值，而不是相对值。比如当前元素垂直滚动距离 element.scrollTop = 200，则设置完后，该元素垂直滚动的距离为100，而不是100+200

2、offsetTop：https://developer.mozilla.org/en-US/docs/DOM/element.offsetTop

返回该元素相对于其offsetParent顶部的距离，至于offsetParent，指的是距离该元素最近的定位元素，如下所示

<div id="p"><a> <span id="c"></span> </a></div>， P为C的offsetParent，offsetTop则为C距离P顶部的距离

这里有一个写的比较简单的例子：

<<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

    #marquee {

        position: relative;

        height: 300px;

        width: 200px;

        overflow: hidden;

        border: 10px solid #369;

        padding:0;

        margin:0;

    }

    #marquee img {

        display: block;

    }

    #marquee dd {

        margin: 0px;

        padding: 0px;

    }

</style>

</head>

<body>

<dl id="marquee">

    <dt>

        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="无缝滚动" />

        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动" />

        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="无缝滚动" />

        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="无缝滚动" />

        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="无缝滚动" />

        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动" />

        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="无缝滚动" />

    </dt>

    <dd>

    </dd>

</dl>

<script type="text/javascript">

    var Marquee = function (id) {

        var container = document.getElementById(id),

  original = container.getElementsByTagName("dt")[0],

  clone = container.getElementsByTagName("dd")[0],

  speed = arguments[1] || 10;

        clone.innerHTML = original.innerHTML;

        alert(container.scrollTop);

        var rolling = function () {

            if (container.scrollTop == clone.offsetTop) {

            //我现在纠结的就是container.scrollTop和clone.offsetTop的区别

            // 为什么clone.offsetTop是1050，而外面的container.scrollTop却是0    

                container.scrollTop = 0;

            } else {

                container.scrollTop++;

            }

        }

        var timer = setInterval(rolling, speed)

        container.onmouseover = function () { clearInterval(timer) }

        container.onmouseout = function () { timer = setInterval(rolling, speed) }

    }

    window.onload = function () {

        Marquee("marquee");

    }

</script>

</body>

</html>

Js上下左右无缝隙滚动代码的更多相关文章

javascript-图片横向无缝隙滚动(可在服务器运行)
前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了. css代码: <style type="text/cs ...
marquee上下左右循环无缝滚动代码
一.横向滚动<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN "><HTML>< ...
javascript-图片横向无缝隙滚动
<style type="text/css"> <!-- ul,li,div{margin:0; padding:0; font-size:12px;} #dem ...
js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
HTML滚动字幕代码参数详解及Js间隔滚动代码
html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...
JavaScript js无间断滚动效果 scrollLeft方法使用模板
JavaScript js无间断滚动效果 scrollLeft方法使用模板 <!DOCTYPE HTML><html><head><meta charset ...
DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
(含上下左右滚动代码) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
js无间隙滚动
代码一: ; //设置文字滚动速度 dome2.innerHTML=dome1.innerHTML //复制dome1为dome2 function Marquee(){ ) //当滚动至dome1与 ...
今天代码中接触到了一个新的东西。js的上下自动滚动，无缝对接。
js的上下自动滚动,无缝对接.为什么会用到这个东西呢?因为我在做公司的官网项目的修改的时候.有一个产品介绍的页面,会有很多的产品出现在,中间部分的列表里.但是又不能够使用分页.所以我就在想如果,列表数 ...

随机推荐

008-Hadoop Hive sql语法详解3-DML 操作:元数据存储
一.概述 hive不支持用insert语句一条一条的进行插入操作,也不支持update操作.数据是以load的方式加载到建立好的表中.数据一旦导入就不可以修改. DML包括:INSERT插入.UPDA ...
c++中字符串反转的3种方法
第一种:使用algorithm中的reverse函数 #include <iostream> #include <string> #include <algorithm& ...
(转)C语言中Exit函数的使用
C语言中Exit函数的使用 exit() 结束当前进程/当前程序/,在整个程序中,只要调用 exit ,就结束return() 是当前函数返回,当然如果是在主函数main, 自然也就结束当前进程了,如 ...
mycat 指定mycat节点
mycat 指定节点: /*!mycat:dataNode=order1*/select seq_nextval('APPOINTMENT_NO'); 指定节点创建存储过程或建表: /*!mycat: ...
CodeForces - 662C Binary Table (FWT)
题意:给一个N*M的0-1矩阵,可以进行若干次操作,每次操作将一行或一列的0和1反转,求最后能得到的最少的1的个数. 分析:本题可用FWT求解. 因为其0-1反转的特殊性且\(N\leq20\),将每 ...
SqlHelper简单实现（通过Expression和反射）9.Sql表述对象SqlSession
此类是整个SqlHelper的另一个核心,基本思想就是通过EntityHelper,ObjectHelper和ExpressionHelper获取拼接Select语句的全部元素,拼接出完整Select ...
20145316 《Java程序设计》课程总结
###20145316许心远<Java学习笔记(第8版)>课程总结 ##每周读书笔记链接汇总 ▪ [第一周读书笔记](http://www.cnblogs.com/xxy745214 ...
linux搭建svn服务并手动同步代码到web目录和自动更新
1.安装svn服务端 yum -y install subversion 2.查看安装路径等信息 rpm -ql subversion 3.查看svn帮助信息 svn help 4.创建svn版本库目 ...
myeclipse 方法上加上@Override就报错的处理方法
在有@Override方法上面会报错如下: The method oncreate(Bundle) of type HelloWorld must override or implement a su ...
FFmpeg 入门(1)：截取视频帧
本文转自:FFmpeg 入门(1):截取视频帧 | www.samirchen.com 背景在 Mac OS 上如果要运行教程中的相关代码需要先安装 FFmpeg,建议使用 brew 来安装: // ...

Js上下左右无缝隙滚动代码

Js上下左右无缝隙滚动代码的更多相关文章

随机推荐

热门专题