<!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. Yii2中如何将Jquery放在head中的方法

    原文地址: https://my.oschina.net/kenblog/blog/547602 方法一(推荐):针对jquery进行components配置,指定Yii2自带jquery自带资源出现 ...

  2. Spring系列之Spring常用注解总结

    传统的Spring做法是使用.xml文件来对bean进行注入或者是配置aop.事物,这么做有两个缺点:1.如果所有的内容都配置在.xml文件中,那么.xml文件将会十分庞大:如果按需求分开.xml文件 ...

  3. Codeforces #261 D

    Codeforces #261 D D. Pashmak and Parmida's problem time limit per test 3 seconds memory limit per te ...

  4. PHP获取当前页面的URL

    /** * 获取当前页面完整URL地址 * * @author 52php.cnblogs.com */ function http_get_page_url() { global $_G; if ( ...

  5. 《征服 C 指针》摘录3：数组 与 指针

    一.数组 和 指针 的微妙关系 数组 是指将固定个数.相同类型的变量排列起来的对象. 正如之前说明的那样,给指针加 N,指针前进“当前指针指向的变量类型的长度 X N”. 因此,给指向数组的某个元素的 ...

  6. Linux/CentOS下开启MySQL远程连接，远程管理数据库

    当服务器没有运行PHP.没装phpMyAdmin的时候,远程管理MySQL就显得有必要了. 第一步:开启MySQL用户的远程访问权限 mysql -u root -p mysql # 第1个mysql ...

  7. 【安卓】aidl.exe E 10744 10584 io_delegate.cpp:102] Error while creating directories: Invalid argument

    这几天在使用.aidl文件的时候eclipse的控制台总是爆出如下提示: aidl.exe E 10744 10584 io_delegate.cpp:102] Error while creatin ...

  8. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  9. 安装配置LDAP遇到的问题

    问题1:安装完启动ldap服务报错: ldap: unrecognized service? 原因在于新版的openldap将服务名改为了slapd,使用service slapd start即可启动 ...

  10. Python基本数据类型

    一.整数 int(整形) 在32位机器上,整数的位数为32位,取值范围为-2**31~2**1-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值范围为-2* ...