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

来源：互联网发布：网络动漫城编辑：程序博客网时间：2024/06/17 01:13

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

(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