js 无缝滚动效果学习

最新推荐文章于 2024-07-14 15:54:59 发布

weixin_34007886

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量59

点赞数

文章标签： javascript ViewUI

<!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.οnmοuseοver=function(){
            clearInterval(that.MyMar)
        };
        this.tabdetail.οnmοuseοut=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 主要用来定位子容器在父容器中的定位，控制子容器的位置

weixin_34007886

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 无缝滚动效果学习

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;无缝滚动测试&lt;/title&gt; &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt; &lt;meta na
复制链接

扫一扫