您的位置：首页 > Web前端 > JavaScript

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

2016-11-14 16:23 1326 查看

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

插件代码如下：

(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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 插件扩展函数实例 javascript

相关文章推荐

新的分享

章节导航