zoukankan      html  css  js  c++  java
  • javascript-无间缝滚动,封装

    目前支持的是竖向与横向滚动

    http://lgyweb.com/marScroll/

    现在分析下无间缝实现的基本思路(竖向例子):

    HTML结构:

    复制代码
    1 <div id="marScroll">
    2         <ul>
    3             <li>01</li>
    4             <li>02</li>
    5             <li>03</li>
    6             <li>04</li>
    7             <li>05</li>
    8         </ul>
    9 </div>
    复制代码

    CSS:

    1 <style type="text/css">
    2     ul,li{padding: 0;margin: 0;}
    3     #marScroll{height: 60px;overflow: hidden;}
    4     #marScroll li{height: 20px;line-height: 20px;font-size: 14px;}
    5 </style>

    (1)首先需要判断里面的内容高度ul结构是否高于外层div#marScrolll,则才进行无间缝滚动:

    复制代码
           // 写在匿名函数里面,防止全局变量污染
        (function(){
            var target = document.getElementById('marScroll'),
                oUl = target.getElementsByTagName('ul')[0];
            // 内容少,则直接退出此函数
            if(oUl.offsetHeight<target.offsetHeight) return;
        })();
    复制代码

    (2)无间缝就是内容的无限滚动展示,那么先需要复制里面的内容,然后通过外层的scrollTop++属性,用setInterval 函数进行循环执行

    复制代码
            target.innerHTML += target.innerHTML;
            /* 判断每次滚动的距离等于第一个ul的高度时,设置scrollTop为0,然后如此的循环操作就是无间滚动了
            ---------------------------------------------------------------------------------------------*/
            // 把功能函数抽离出来,方便调用
            var fn = function(){
                if(target.scrollTop == oUl_h){
                    target.scrollTop = 0;
                }else{
                    target.scrollTop++;
                }
            }
            // setInterval 循环
            var timer = setInterval(function(){
                fn();
            },30);
    复制代码

    (3)鼠标经过此内容块时,就停止滚动

    复制代码
            // hover
            target.onmouseover = function(){
                clearTimeout(timer);
            }
            target.onmouseout = function(){
                timer = setInterval(function(){
                    fn();
                },30);
            }
    复制代码

    例子JS总代码:

    复制代码
         // 写在匿名函数里面,防止全局变量污染
        (function(){
            var target = document.getElementById('marScroll'),
                oUl = target.getElementsByTagName('ul')[0],
                oUl_h = oUl.offsetHeight;
            // 内容少,则直接退出此函数
            if(oUl_h<target.offsetHeight) return;
    
            target.innerHTML += target.innerHTML;
    
            /* 判断每次滚动的距离等于第一个ul的高度时,设置scrollTop为0,然后如此的循环操作就是无间滚动了
            ---------------------------------------------------------------------------------------------*/
            // 把功能函数抽离出来,方便调用
            var fn = function(){
                if(target.scrollTop == oUl_h){
                    target.scrollTop = 0;
                }else{
                    target.scrollTop++;
                }
            }
            // setInterval 循环
            var timer = setInterval(function(){
                fn();
            },30);
            // hover
            target.onmouseover = function(){
                clearTimeout(timer);
            }
            target.onmouseout = function(){
                timer = setInterval(function(){
                    fn();
                },30);
            }
        })();
    复制代码

     已经完成了个简单的竖向无间缝,为了满足更多的需求,建议封装成可以,竖向,横向,多次调用的函数。

    以下是个人的封装,线上例子:

    http://lgyweb.com/marScroll/

    复制代码
    function GyMarquee(opt){
        this.opt = opt;
        if(!document.getElementById(this.opt.targetID)) return;
        this.target = document.getElementById(this.opt.targetID);
        this.dir = this.opt.dir == 'crosswise'?'crosswise':'vertical';
        this.effect = this.opt.effect == 'scroll'?'scroll':'marque';
        this.scrollHeight = this.opt.scrollHeight;
        this.init();
    }
    GyMarquee.prototype = {
        marquee:function(){
            var _that = this,
                direction = 'scrollTop',
                judge = this.target.scrollHeight,
                timer = null;
            if(this.dir == 'crosswise'){
                direction = 'scrollLeft';
                judge = this.itemLen*this.opt.itemWidth;
                this.targetChild.style.width = this.itemLen*this.opt.itemWidth*2 + 'px';
            }
            var doFn = function(){
                if(_that.target[direction] == judge){
                    _that.target[direction] = 0;
                }
                _that.target[direction]++;
            }
            timer = setInterval(function(){
                doFn();    
            },38);
            this.target.onmouseover = function(){
                if(timer) clearTimeout(timer);
            }
            this.target.onmouseout = function(){
                timer = setInterval(function(){
                    doFn();    
                },38);
            }
        },
        scrollDo:function(){
            var can = true,
                _that = this;
            this.target.onmouseover=function(){can=false};
            this.target.onmouseout=function(){can=true};
            new function (){
                var stop=_that.target.scrollTop%_that.scrollHeight==0&&!can;
                if(!stop)_that.target.scrollTop==parseInt(_that.target.scrollHeight/2)?_that.target.scrollTop=0:_that.target.scrollTop++;
                setTimeout(arguments.callee,_that.target.scrollTop%_that.scrollHeight?20:2500); 
            };
        },
        getByClassName:function(className,parent){
            var elem = [],
                node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
                p = new RegExp("(^|\s)"+className+"(\s|$)");
            for(var n=0,i=node.length;n<i;n++){
                if(p.test(node[n].className)){
                    elem.push(node[n]);
                }
            }
            return elem;
        },
        init:function(){
            var val = 0;
            if(this.dir =='crosswise'&&this.effect=='marque'&&this.opt.itemName!=''){
                this.itemLen = this.target.getElementsByTagName(this.opt.itemName).length;
                val = this.itemLen*this.opt.itemWidth;    
            }else{
                val = this.target.scrollHeight;
            }
            var holderHTML = this.target.innerHTML;
            this.target.innerHTML = '<div class="J_scrollInner">'+holderHTML+'</div>';
            this.targetChild = this.getByClassName('J_scrollInner',this.target)[0];
            var attr = this.dir == 'vertical'?'offsetHeight':'offsetWidth';
            if(val>this.target[attr]){
                if(this.effect == 'scroll'){
                    this.scrollDo();
                }else{
                    this.marquee();
                }
                this.targetChild.innerHTML += this.targetChild.innerHTML;
            }
        }
    }
    复制代码
     
     
     
    标签: javascript
  • 相关阅读:
    deeplearning.ai 卷积神经网络 Week 1 卷积神经网络
    deeplearning.ai 构建机器学习项目 Week 2 机器学习策略 II
    deeplearning.ai 构建机器学习项目 Week 1 机器学习策略 I
    deeplearning.ai 改善深层神经网络 week3 超参数调试、Batch Normalization和程序框架
    deeplearning.ai 改善深层神经网络 week2 优化算法
    deeplearning.ai 改善深层神经网络 week1 深度学习的实用层面
    cs231n spring 2017 lecture8 Deep Learning Networks
    cs231n spring 2017 lecture7 Training Neural Networks II
    cs231n spring 2017 lecture6 Training Neural Networks I
    cs231n spring 2017 Python/Numpy基础
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3531034.html
Copyright © 2011-2022 走看看