<!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. thinkphp3.2与phpexcel基础生成

    public function ff(){ import("Org.Util.PHPExcel"); import("Org.Util.PHPExcel.Workshee ...

  2. Class PLBuildVersion is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/AssetsLibr

    网上找了一大堆,没有解决的办法 ,主要是iOS10的适配问题,info.plist里没有加对. 访问相册,我只加了 <!-- 相册 --> <key>NSPhotoLibrar ...

  3. [UML]UML系列——活动图activity diagram

    系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类图Class [UML]UML系列——类 ...

  4. AOP基本名词解释

  5. JavaScript - 初识

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

  6. APP注释代码

    <meta name="viewport" content="width=device-width,height=device-height,inital-scal ...

  7. C和指针 第十二章 使用结构和指针 双链表和语句提炼

    双链表中每个节点包含指向当前和之后节点的指针,插入节点到双链表中需要考虑四种情况: 1.插入到链表头部 2.插入到链表尾部 3.插入到空链表中 4.插入到链表内部 #include <stdio ...

  8. 1·3 对 git 的认识

    我可以诚实的说:这是我第一次听见这个名词 GIT.老师您发的关于git链接我下载了,只是还没看完.所以以下只是片面的理解,在后期我会单独再发一次. 一·GIT的简单介绍 1·Git是一款免费.开源的分 ...

  9. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

  10. OpenVpn简单架设

    首先Wget wget http://swupdate.openvpn.org/as/openvpn-as-2.0.24-CentOS6.i386.rpm wget http://swupdate.o ...