js扩展滚动窗口小插件实现文字左右上下滚动效果实例

最新推荐文章于 2019-08-06 11:36:00 发布

任聪聪

最新推荐文章于 2019-08-06 11:36:00 发布

阅读量2k

点赞数 1

分类专栏： Javascript 文章标签：插件扩展函数实例 javascript

本文链接：https://blog.csdn.net/hj960511/article/details/53160246

版权

Javascript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

方法一：使用小插件实现，兼容很好
插件代码如下：

(function($) { 
 $.fn.jMarquee = function(o) {
    o = $.extend({ speed:50, step:1,//速度 direction:"up",//方向 visible:1//数量 }, o || {});
    //配置参数
    var i=0;
    var div=$(this);
    var ul=$("ul",div);
    var tli=$("li",ul);
    var liSize=tli.size();
    if(o.direction=="left")
        tli.css("float","left");
    var liWidth=tli.innerWidth();
    var liHeight=tli.height();
    var ulHeight=liHeight*liSize;
    var ulWidth=liWidth*liSize;

    //写入
    if(liSize>o.visible){
        ul.append(tli.slice(0,o.visible).clone())  //重写html
        li=$("li",ul);
        liSize=li.size();

          //写css样式
        div.css({"position":"relative",overflow:"hidden"});
        ul.css({"position":"relative",margin:"0",padding:"0","list-style":"none"});
        li.css({margin:"0",padding:"0","position":"relative"});

        switch(o.direction){ case "left": div.css("width",(liWidth*o.visible)+"px"); ul.css("width",(liWidth*liSize)+"px"); li.css("float","left"); break; case "up": div.css({"height":(liHeight*o.visible)+"px"}); ul.css("height",(liHeight*liSize)+"px"); break; }


        var MyMar=setInterval(ylMarquee,o.speed);
        ul.hover( function(){clearInterval(MyMar);}, function(){MyMar=setInterval(ylMarquee,o.speed);} ); }; function ylMarquee(){ if(o.direction=="left"){ if(div.scrollLeft()>=ulWidth){ div.scrollLeft(0); } else { var leftNum=div.scrollLeft(); leftNum+=parseInt(o.step); div.scrollLeft(leftNum) } } if(o.direction=="up"){ if(div.scrollTop()>=ulHeight){ div.scrollTop(0); } else{ var topNum=div.scrollTop(); topNum+=parseInt(o.step); div.scrollTop(topNum); } } }; };  })(jQuery);



//调用
$(document).ready(function(){ //.stroll1是div里面带一个ul就行了，里面的数据使用php调取 $(".stroll1").jMarquee({visible:4,step:1,direction:"up"}); $(".stroll2").jMarquee({visible:4,step:1,direction:"up"}); $(".stroll3").jMarquee({visible:4,step:1,direction:"up"}); })

方法二：css3加js实现，转载自靖鸣君博客
js代码：

/**
* @author 靖鸣君
* @email jingmingjun92@163.com
* @description 滚动
* @class Marquee
* @param {Object}
*/
var Marquee = function(){
    this.direction = "top";
    this.speed = 30;
};

Marquee.prototype = {
    //initial
    init: function(obj, setttings){
        this.obj = obj;
        this._createBox();
        this.scroll();
        if(settings){
            settings.direction && (this.direction = settings.direction);
            settings.speed && (this.speed = settings.speed);
        }
    },
    _createBox: function(){
        //create inner box A
        this.iBox = document.createElement("div");
        var iBox = this.iBox;
        with(iBox.style){
            width = "100%";
            height = "100%";
            overflow = "hidden";
        }
        iBox.setAttribute("id", "marqueeBoxA");
        iBox.innerHTML = obj.innerHTML;

        //clone inner box B
        var iBox2 = iBox.cloneNode(true);
        iBox2.setAttribute("id", "marqueeBoxB");

        //append to obj Box
        this.obj.innerHTML = "";
        this.obj.appendChild(iBox);
        this.obj.appendChild(iBox2);
    },
    //animation
    scroll: function() {
        var _self = this;
        this.timer = setInterval(function(){
            _self._ani();
        }, this.speed);
    },
    //setInterval function
    _ani: function() {
        if(obj.clientHeight - obj.scrollTop <= 0){
            obj.scrollTop = obj.offsetHeight - obj.scrollTop + 1;
        } else {
            obj.scrollTop++;
            console.log(obj.offsetHeight, obj.scrollTop);
        }
    },
    stop: function(){
        clearInterval(this.timer);
    },
    start: function(){
        this.scroll();
    }
};

html对应代码

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Demo</title>
    <style type="text/css">
        #box { 
            width: 150px;
            height: 200px;
            border:1px solid #EFEFEF;
            background: #F8F8F8;
            padding:0 20px;
            line-height:22px;
            overflow:hidden;
        }
    </style>
</head>

<body>
    <div id="box">
        我是靖鸣君1<br /> 我是靖鸣君2<br /> 我是靖鸣君3<br /> 我是靖鸣君4<br /> 我是靖鸣君5<br />
        我是靖鸣君1<br /> 我是靖鸣君2<br /> 我是靖鸣君3<br /> 我是靖鸣君4<br /> 我是靖鸣君5<br />
    </div>
</body>
</html>

任聪聪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js扩展滚动窗口小插件实现文字左右上下滚动效果实例

方法一：使用小插件实现，兼容很好插件代码如下：(function($) { $.fn.jMarquee = function(o) { o = $.extend({ speed:50, step:1,//速度 direction:"up",//方向 visible:1//数量 }, o || {}); //配置参数 var i=
复制链接

扫一扫