简单的Jquery文件向上滚动插件
2011-12-08 00:32
344 查看
下面一个简单jquery文字向上滚动插件:
HTML/css代码:
Jquery
附件:http://down.51cto.com/data/2359433
HTML/css代码:
<!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>无标题文档</title> <style> div,body,ul,li{ margin:0; padding:0;} #scroll{ height:24px; width:200px; border:1px solid #999; overflow:hidden; margin:120px auto 0 auto; position:relative;} #scroll ul{ position:relative;} #scroll ul li{ height:24px; line-height:24px; overflow:hidden;} #scroll ul li a{ color:#000; font-size:12px; margin-left:5px; text-decoration:none;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> </head> <body> <div id="scroll"> <ul> <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> </ul> </div>
Jquery
<script> (function(S){ S.fn.extend({ Scroll:function(speed){ var liH = $(this).find("li").height(); var _this = $(this).find("ul"); function Slide(){ _this.animate({marginTop : -liH},1000,function(){ _this.css({marginTop:0}).find("li:first").appendTo(_this); }) } //自动播放 function autoPlay(){ timeId = setInterval(Slide,speed); }; //停止播放 function autoStop(){ window.clearInterval(timeId); }; autoPlay(); _this.hover(autoStop,autoPlay).mouseout() } }) })(jQuery); $(function(){ $("#scroll").Scroll(2000); }) </script>
附件:http://down.51cto.com/data/2359433
相关文章推荐
- jquery插件之文字间歇自动向上滚动
- 转:一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jquery插件之文字间歇自动向上滚动效果代码
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
- JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传
- 简单的jQuery.jqprint插件实现打印HTML页面,页面导出为PDF文件
- jQuery插件--图片文字向上向左循环滚动
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- [jQuery] 最简单的字幕自动向上滚动
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- 简单的 jQuery 浮动层随窗口滚动滑动插件实例
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jQuery插件实现文字无缝向上滚动效果代码
- 简单的 jQuery 浮动层随窗口滚动滑动插件实例
- 一个简单的jQuery插件ajaxfileuplo 4000 ad实现ajax上传文件例子
- JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传
- jQuery实现简单的间隔向上滚动效果
- 简单的jQuery无缝向上滚动效果
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jQuery实现简单的间隔向上滚动效果