<!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. 面试题目——《CC150》智力题

    面试题6.1:有20瓶药丸,其中19瓶装有1克/粒的药丸,余下一瓶装有1.1克/粒的药丸.给你一台称重精准的天平,怎么找出比较重的那瓶药丸?天平只能用一次. 思路:第1瓶取1颗,第2瓶取2颗....最 ...

  2. Java学习笔记10

    31.编写当年龄age大于13且小于18时结果为true的布尔表达式age > 13 && age < 18 32.编写当体重weight大于50或身高大于160时结果为t ...

  3. Bash 会清空从父进程继承来的 OLDPWD

    即便 Bash 没有从父进程继承任何的环境变量,Bash 自己也会创建三个环境变量,分别是: $ env -i bash -c export declare -x OLDPWD declare -x ...

  4. nyoj 106背包问题（贪心专题）

    背包问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现在有很多物品(它们是可以分割的),我们知道它们每个物品的单位重量的价值v和重量w(1<=v,w< ...

  5. PhpStorm 2016.3 For Mac 重大里程碑更新 -- 终于解决了不能输入中文标点符号的重大bug

    PhpStorm 2016.3 For Mac 重大里程碑更新 1.[终于解决了]不能输入中文标点符号的重大bug,如 逗号“,”.“.”: 2.可以在一个窗体中,同时打开多个项目: 3.其他... ...

  6. shell--4.echo和printf

    1. echo (1) echo ,显示普通字符串 echo "HelloWorld" 打印:HelloWorld (2) \ ,显示转义字符串 echo "\" ...

  7. Shodan新手入坑指南

    *本文原创作者:xiaix,本文属FreeBuf原创奖励计划,未经许可禁止转载 亲们~黑五 Shodan Membership 只要5刀,你剁手了没? 什么是 Shodan? 首先,Shodan 是一 ...

  8. python基础一

    1.1 Python优点 1.简单.优雅.明确 2.强大的模块三方库 3.易移植 4.面向对象 5.可扩展(c\java\c#...) 1.2 Python缺点 1.代码不能加密 2.速度慢   1. ...

  9. C Primer Plus_第10章_数组和指针_编程练习

    1. /*rain.c 针对若干年的降水量数据,计算年降水总量.年降水平均量,以及月降水平均量*/ #include <stdio.h> #define MONTHS 12 #define ...

  10. OUC校园导游

    大二专业课太多,都没有好好的在博客上面做笔记,以备后面用的时候可以查找看一下,下面是写的不是完全正确的与图相关的代码~~希望指正~~ /* Name: Copyright: Author:Hxm Da ...