jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码

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>

赞 (0)

相关推荐

  • 彻底搞懂JS无缝滚动代码

    在做个东西要滚动代码 而且是无缝的 搞了半天还是不行  决心一定要把这个问题搞定 经过研究 也不难 代码如下: 程序代码 复制代码 代码如下: <div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600>  <table  align=top>  <tr>  <td id=demo1 valign=top> <p>aaaaaaaaaa

  • 基于jQuery的图片左右无缝滚动插件

    在线演示:http://demo.jb51.net/js/2012/myslideLeftRight/打包下载:http://www.jb51.net/jiaoben/44973.html核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "slidelf":function(value){ value = $.extend({ "prev":"", "next":""

  • js 实现无缝滚动 兼容IE和FF

    原理解析: 1.首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden: 2.容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果: 3.改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理): 4.到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间

  • 新闻一段时间向上滚动效果

    BODY { FONT-SIZE: 12px; MARGIN: 0px; OVERFLOW: visible; LINE-HEIGHT: 140% } UL { FONT-SIZE: 12px; MARGIN: 0px; OVERFLOW: visible; LINE-HEIGHT: 140% } LI { FONT-SIZE: 12px; MARGIN: 0px; OVERFLOW: visible; LINE-HEIGHT: 140% } A:link { FONT-SIZE: 12px;

  • jquery无缝向上滚动实现代码

    JS部份 复制代码 代码如下: $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scrollTimer = setInterval(function(){ scrollNews( $this ); }, 2000 ); }).trigger("mouseout"); });

  • 图片向上滚动

    图片向上滚动

    articleHeight=150; stopscrolla=false; article1.scrollTop=0; //more javascript from http://www.webjx.com with(article1){ style.width=0; style.height=articleHeight; style.overflowX="visible"; style.overflowY="hidden"; noWrap=true; onmous

  • JS左右无缝滚动（一般方法+面向对象方法）

    复制代码 代码如下: <!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=&qu

  • 无缝滚动改进版支持上下左右滚动（封装成函数）

    复制代码 代码如下: <!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>无缝滚动--上下</title>    <style type="text/css">    *{margin:0;padding:0;}    li{list-style:none;}  

  • 简单的无缝滚动程序-仅几行代码

    <ul id="ScrollBox" style="width:300px;height:80px;overflow:hidden;margin:0;padding:0;line-height:20px;font-size:12px;"> <li>1.你可曾有过无数的梦想,</li> <li>2.却在时光的流逝里幻灭 </li> <li>3.你可曾对未来期待憧憬,</li> <

  • 简短几句jquery代码的实现一个图片向上滚动切换

    animate()参数介绍: animate() 方法执行 CSS 属性集的自定义动画. 该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果. 只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). PS:但是如果你引用了最新jquery ui框架的话backgroudColor,color之类的属性也可以实现渐变了. PS:使用 &q

随机推荐