<!DOCTYPE html>

<html>

<head>

    <title>无缝滚动测试</title>

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <script type="text/javascript" src="../dist/zepto.js"></script>

</head>

<body>

<style type="text/css">

    #ScrollContainer{

        overflow: hidden;

        width: 500px;

    }

    #Container{

        float: left;

        width: 800%;

    }

    #detail{

        float: left;

    }

    #detailview{

        float: left;

    }

</style>

<div id="ScrollContainer">

    <div id="Container">

        <div id="detail">

            <a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s1.jpg" border="0" /></a>

            <a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s2.jpg" border="0" /></a>

            <a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s3.jpg" border="0" /></a>

            <a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s4.jpg" border="0" /></a>

            <a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s5.jpg" border="0" /></a>

            <a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s6.jpg" border="0" /></a>

        </div>

        <div id="detailview"></div>

    </div>

</div>

<script>

    (function(Scroll,Container,detail){

        //nowmyMarquee.run();

    })("ScrollContainer","Container","detail")

    function myMarquee(Scroll,Container,detail){

        console.log(this);

        var that=this;

        this.speed=10;

        this.tabScroll=document.getElementById(Scroll);

        this.tabdetail=document.getElementById(detail);

        this.tabdetailView=document.getElementById(detail+'view');

        this.tabdetailView.innerHTML=this.tabdetail.innerHTML;

        this.Marquee=function(){

            if(this.tabdetailView.offsetWidth-this.tabScroll.scrollLeft<=0)

            {

                //一轮滚动结束需要充值

                this.tabScroll.scrollLeft-=this.tabdetail.offsetWidth;

            }

            else

            {

                this.tabScroll.scrollLeft++;

            };

        };

        this.tabdetail.onmouseover=function(){

            clearInterval(that.MyMar)

        };

        this.tabdetail.onmouseout=function(){

            that.MyMar=setInterval(

                  function(){  that.Marquee.apply(that)}

                    , that.speed);

        }

        this.run=function(){

            this.MyMar=setInterval(

                    function(){  that.Marquee.apply(that)}

                    ,   that.speed);

        }

        this.run();

    }

    var  nowmyMarquee=new myMarquee("ScrollContainer","Container","detail")

</script>

</body>

</html>

offsetWidth 和 scrollLeft 的应用 和子容器800%与父容器的使用

参考 http://blog.csdn.net/xuantian868/article/details/3116442

obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。

3.scrollLeft,scrollTop:

如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.

对于不可以滚动的元素,这些值总是0.

scrollLeft 主要用来定位子容器在父容器中的定位，控制子容器的位置

js 无缝滚动效果学习的更多相关文章

  1. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  3. 手写JS无缝滚动插件

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

  4. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

  5. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  6. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  7. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  8. javascript小例子：實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

  9. jq封装-无缝滚动效果

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

随机推荐

  1. C++ 11 中的右值引用

    C++ 11 中的右值引用 右值引用的功能 首先,我并不介绍什么是右值引用,而是以一个例子里来介绍一下右值引用的功能: #include <iostream>    #include &l ...

  2. centos7删除自带openjdk

    一些开发版的centos会自带jdk,我们一般用自己的jdk,把自带的删除.先看看有没有安装java -version [root@java-test-01 ~]# java -version ope ...

  3. Python 读写文件中数据

    1 需求 在文件 h264.txt 中的数据如图1,读入该文件中的数据,然后将第1列的地址删除,然后将数据输出到h264_out.txt中: 图1 h264.txt 数据截图             ...

  4. Html限制input输入框只能输入数字

    限制输入框只能输入数字, onafterpaste防止用户从其它地方copy内容粘贴到输入框: <input type="text" onkeyup="this.v ...

  5. VTK初学一，动画加AVI录制终于做出来了

      #ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE_INIT(vtkRe ...

  6. hadoop集群安装故障解决

    nodemanager进程解决:http://blog.csdn.net/baiyangfu_love/article/details/13504849 编译安装:http://blog.csdn.n ...

  7. 试图加载格式不正确的程序。 (异常来自HRESULT:0x8007000B)

    异常来自HRESULT:0x8007000B   缘由:在64位操作系统下IIS发布32位的项目,报“项目依赖的dll无法读取,试图加载格式不正确的程序”错误. 原因:程序集之间的通讯要么全是64位环 ...

  8. JavaScript - 初识

    流程图分为顺序结构.选择结构.循环结构 引入JS的方式有1.使用外部的JS文件<script src="..."></script>2.使用标签直接嵌入网页 ...

  9. ASP.NET AJAX调用 WebService

    同事的代码,帮忙修改的,为了实现页面跳转回来后,状态的保持,Service 使用了Session. 主要的JS $.ajax({ url: "/ws/StaffInfo.asmx/Note& ...

  10. 基本 sql语句

    1.打开数据库 int sqlite3_open( const char *filename,   // 数据库的文件路径 sqlite3 **ppDb          // 数据库实例 ); 2. ...