- 浏览: 185321 次
- 性别:
- 来自: 四川
文章分类
- 全部博客 (131)
- CMS内容管理系统 (3)
- 支付宝实习之旅 (1)
- javaSE (5)
- myEclipse (1)
- DWR (0)
- strut2 (6)
- spring (4)
- hibernate (6)
- jquery (26)
- extjs (0)
- oracle (1)
- flex (10)
- ajax (0)
- jsp (3)
- java (4)
- JavaScript (4)
- css+div (5)
- Java面试 (3)
- java设计模式 (2)
- Think in java 笔记 (2)
- dom4j (1)
- JDBC (1)
- 经典方法学习 (1)
- windows常用操作 (1)
- maven (1)
- 75道经典逻辑题及答案 (1)
- mysql (3)
- jqueryDemo(插件) (3)
- php (14)
- ubuntu (6)
- 记事本 (1)
- php缓存 (1)
- 编程思想 (5)
- wamp (1)
- android (2)
- xml (1)
最新评论
-
coosummer:
推荐使用http://buttoncssgenerator.c ...
CSS按钮(研究) -
javaCrazy!:
监听一个keyup事件
jquery 监听input输入值事件 -
丶月满灬西楼彡:
问个问题:假如用户在Input中输入了“12345”,但后来又 ...
jquery 监听input输入值事件
<!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=gb2312" />
<title>多行滚动jQuery循环新闻列表代码</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//滚动插件
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//参数初始化
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(), //获取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数,默认为一屏,即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度,数值越大,速度越慢(毫秒)
timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒)
if(line==0) line=1;
var upHeight=0-line*lineH;
//滚动函数
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
//鼠标事件绑定
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",timer);
}).mouseout();
}
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:4,speed:500,timer:1000});
});
</script>
</head>
<body>
<p>多行滚动演示:</p>
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
</body>
</html>
发表评论
-
jquery多函数执行
2014-01-07 15:33 9001、Array.prototype.slice.apply ... -
js关闭浏览器兼容性问题
2013-09-13 10:23 7271、ie,chrome下面代码都可以 window.ope ... -
jquery弹框插件(自定义easy-box)
2013-08-30 14:39 9681、插件代码easy-box.js $.ext ... -
50个jQuery代码段帮你成为更出色的JS开发者
2013-08-29 15:06 8690. 如何创建嵌套的过滤器: -
jquery验证插件进一步进行封装(easy-check)
2013-07-29 14:48 21661、easy-check.js,核心代码如下(要运行dem ... -
php echo jquery代码
2013-07-09 11:30 1461话不多少,直接贴上代码 echo "<sc ... -
用户图上传从本地加载图片,兼容ie6+,chrome,firefox
2012-11-24 17:26 784直接上代码 写道 <!DOCTYPE htm ... -
既可输入也可以选择的(input+select)兼容ie6+,chrome,firefox
2012-11-24 17:25 1165直接上代码 <html> <hea ... -
js或jquery导致ie6下,gif卡帧(不动)
2012-11-21 14:01 3064IE6下当JS触发GIF格式图片时,经常会出现GIF图片动几下 ... -
js解决IE遮罩层无法遮罩select
2012-11-07 15:23 8941、包含js (function(a){a.fn.bg ... -
div固定顶部或底部,IE下postion:fixed问题
2012-11-07 14:14 793像你所遇到的问题一样, IE6浏览器有太多的bug让制作 ... -
jquery获取各种高度
2012-09-19 20:57 11511alert($(window).height()); ... -
ie6下js的onmouseover和onmouseout事件连续触发问题的解决方法
2012-09-17 11:23 853解决HTML内部元素的Mouse ... -
jquery设置select选中,获取select选中的值 和文本
2012-09-11 17:03 1748选中select选项,根据value var pid ... -
jquery图片剪切(插件)
2012-09-09 12:28 1803我用过的jquery图片剪切插件有jcrop, imgsel ... -
jquery图片左右滚动,代码很简洁
2012-09-03 17:46 698<!DOCTYPE html PUBLIC &qu ... -
jquery 监听input输入值事件
2012-08-22 17:24 18410<html> <head&g ... -
jquery 可扩展滚动移动demo
2012-08-06 22:53 1018<!DOCTYPE html PUBLIC &qu ... -
jquery 设置select选中
2012-08-02 10:01 774jquery代码 $(document).rea ... -
jquery ajax之函数里面ajax请求,不能返回return 值
2012-07-31 21:45 2696代码 代码如下: fu ...
相关推荐
一个图片连续滚动的代码,类似于html中marquee效果,但是能够连续无间断的滚动
公告栏滚动,公告淡出滚动效果,公告淡出滚动JS
C# js 图片连续滚动代码C# js 图片连续滚动代码C# js 图片连续滚动代码C# js 图片连续滚动代码C# js 图片连续滚动代码C# js 图片连续滚动代码C# js 图片连续滚动代码
js文字滚动插件制作新闻公告列表scroll文字间歇滚动 js文字滚动插件制作新闻公告列表scroll文字间歇滚动 js文字滚动插件制作新闻公告列表scroll文字间歇滚动
网站公告Js滚动代码
公告滚动效果 js网站特效
Js图片连续左右滚动.rar
js 特效 html 特效 连续滚动的图片 js 特效 html 特效 连续滚动的图片
js单行文字滚动公告 方便快捷实用 可做网站公告
无间断连续滚动网页代码 不跳动,使用javascript。包含横向,竖向。
JavaScript实现图片连续滚动的案例,实现首页中图片的轮滑
主要为大家详细介绍了JavaScript实现公告栏上下滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
网吧滚动公告 网吧滚动公告 网吧滚动公告 网吧滚动公告 网吧滚动公告 网吧滚动公告 网吧滚动公告 网吧滚动公告 网吧滚动公告 网吧滚动公告 网吧滚动公告 网吧滚动公告
jQuery animate封装向上滚动插件,使用定时器setInterval调用封装的插件实现滚动公告
jQuery网站新闻公告自动左右滚动切换代码是一款简易实用的文字滚动特效,支持自动滚动,点击左右按钮可以控制滚动切换。
js实现的滚动公示栏效果,用于公告栏等的现实
JS实现公告上线滚动效果 本文实例为大家分享了JS实现公告上线滚动效果的具体代码,供大家参考,具体内容如下 实现的效果如下,新闻公告上下滚动。 代码: <!DOCTYPE html> <html lang="en"> <head> ...
通过js实现的新闻列表的滚动效果 效果为连续滚动
图片连续滚动
简单左右连续滚动