<!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# TCP通讯（TcpListener）

      简单的c# TCP通讯(TcpListener) C# 的TCP Socket (同步方式) C# 的TCP Socket (异步方式) C# 的tcp Socket设置自定义超时时间 C# TC ...

  2. 第二轮冲刺-Runner站立会议08

    今天:优化日历界面 明天:将日历界面与主程序结合

  3. Atom编辑器的插件

    先说下atom的插件安装方法吧,因为没用过苹果电脑,所以这里就只说下windows的操作吧. " ctrl+, "调出设置面板 点击install按钮,进去搜索插件面板 1.exp ...

  4. tyvj1144 股票

    描述 2130年,股神巴菲特投胎了!他投胎到你身上!你作为股神转世,能力比原股神还要强,你可以预测到今后n天的股价.假设刚开始你的手上有1元钱,你想知道n天后你最多可以赚到多少钱.作为股神转世,你准备 ...

  5. MySQL 的 find_in_set 函数使用方法

    举个例子来说: 有个文章表里面有个type字段,它存储的是文章类型,有 1头条.2推荐.3热点.4图文...1,12,13 等等 . 现在有篇文章他既是 头条,又是热点,还是图文, type中以 1, ...

  6. php 跨域、跨子域，跨服务器读取session

    1.跨子域和跨服务器解决方式 Session主要分两部分:   一个是Session数据,该数据默认情况下是存放在服务器的tmp文件下的,是以文件形式存在    另一个是标志着Session数据的Se ...

  7. C和指针 第六章 习题

    6.1编写一个函数,它在一个字符串中进行搜索,查找所有在一个给定字符集中出现的字符,返回第一个找到的字符位置指针,未找到返回NULL #include <stdio.h> char * f ...

  8. php中几个字符串替换函数详解

    在php中字符替换函数有几个如有:str_replace.substr_replace.preg_replace.preg_split.str_split等函数,下面我来给大家总结介绍介绍. 一.st ...

  9. Unity3D代码旋转

    subGameObject.transform.Rotate (,,,Space.Self); 一行代码

  10. poj 3687(拓扑排序)

    http://poj.org/problem?id=3687 题意:有一些球他们都有各自的重量,而且每个球的重量都不相同,现在,要给这些球贴标签.如果这些球没有限定条件说是哪个比哪个轻的话,那么默认的 ...