jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
发布时间:2016-12-30 来源:查字典编辑
摘要:html文件gundong-0.1.html复制代码代码如下:多行滚动jQuery循环新闻列表代码ul,li{margin:0;paddin...

html 文件

gundong-0.1.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>多行滚动jQuery循环新闻列表代码</title>

<style type="text/css">

ul,li{margin:0;padding:0}

img{border:0px;}

a{text-decoration:none;border:0px;}

/* 横向滚动 */

#scrollDiv2{border:#ccc 1px solid;}

#scrollDiv3{border:#ccc 1px solid;}

</style>

<script src="../jquery-1.8.0.min.js" type="text/javascript"></script>

<script src="wordscroll-0.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$.wordScroll({

objId:"scrollDiv2"

});

$.wordScroll({

objId:"scrollDiv3",

isHorizontal:true

});

});

</script>

</head>

<body>

<div id="scrollDiv2">

<ul>

<li>这是公告标题的第一行</li>

<li>这是公告标题的第二行</li>

<li>这是公告标题的第三行</li>

<li>这是公告标题的第四行</li>

<li>这是公告标题的第五行</li>

<li>这是公告标题的第六行</li>

<li>这是公告标题的第七行</li>

<li>这是公告标题的第八行</li>

<li>这是公告标题的第九行</li>

</ul>

</div>

<div id="scrollDiv3">

<ul>

<li>这是公告标题的第一行</li>

<li>这是公告标题的第二行</li>

<li>这是公告标题的第三行</li>

<li>这是公告标题的第四行</li>

<li>这是公告标题的第五行</li>

<li>这是公告标题的第六行</li>

<li>这是公告标题的第七行</li>

<li>这是公告标题的第八行</li>

<li>这是公告标题的第九行</li>

</ul>

</div>

</body>

</html>

js文件

wordscroll-0.1.js

复制代码 代码如下:

<P>/**

* 多行文字滚动,可以实现向左和向上两种滚动

*

**/

$.extend({

wordScroll:function(opt,callback){

//alert("suc");

this.defaults = {

objId:"",

width:300, // 每行的宽度

height:100, // div的高度

liHeight:25, // 每行高度

lines:2, // 每次滚动的行数

speed:1000, // 动作时间

interval:2000, // 滚动间隔

picTimer:0, // 间隔句柄,不需要设置,只是作为标识使用

isHorizontal:false // 是否横向滚动

}

//参数初始化

var opts = $.extend(this.defaults,opt);

// 纵向横向通用

$("#"+opts.objId).css({

width:opts.width,

height:opts.height,

"min-height":opts.liHeight,

"line-height":opts.liHeight+"px",

overflow:"hidden"

});

$("#"+opts.objId+" li").css({

height:opts.liHeight

});

if(opts.lines==0)

opts.lines=1;

// 横向滚动

if(opts.isHorizontal){

$("#"+opts.objId).css({

width:opts.width*opts.lines + "px"

});

$("#"+opts.objId+" li").css({

"display":"block",

"float":"left",

"width":opts.width + "px"

});

$("#"+opts.objId+" ul").css({

width:$("#"+opts.objId).find("li").size()*opts.width + "px"

});</P><P> // 横向使用,不够一屏则不滚动

if($("#"+opts.objId).find("li").size()<=opts.lines)

return;

var scrollWidth = 0 - opts.lines*opts.width;

}else{

//如果不够一屏内容 则不滚动

if($("#"+opts.objId).find("li").size()<=parseInt($("#"+opts.objId).height()/opts.liHeight,10))

return;

var upHeight=0-opts.lines*opts.liHeight;

}

// 横向滚动

function scrollLeft(){

$("#"+opts.objId).find("ul:first").animate({

marginLeft:scrollWidth

},opts.speed,function(){

for(i=1;i<=opts.lines;i++){

$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first"));

}

$("#"+opts.objId).find("ul:first").css({marginLeft:0});

});

};

// 纵向滚动

function scrollUp(){

$("#"+opts.objId).find("ul:first").animate({

marginTop:upHeight

},opts.speed,function(){

for(i=1;i<=opts.lines;i++){

$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first"));

}

$("#"+opts.objId).find("ul:first").css({marginTop:0});

});

};

//鼠标滑上焦点图时停止自动播放,滑出时开始自动播放

$("#"+opts.objId).hover(function() {

clearInterval(opts.picTimer);

},function() {

opts.picTimer = setInterval(function() {

// 判断执行横向或纵向滚动

if(opts.isHorizontal)

scrollLeft();

else

scrollUp();

},opts.interval); // 自动播放的间隔,单位:毫秒

}).trigger("mouseleave");

}

})

</P>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类