jQuery插件实现文字无缝向上滚动效果代码
更新时间：2016年02月25日 11:28:40 作者：小坏
这篇文章主要介绍了jQuery插件实现文字无缝向上滚动效果代码,通过时间函数定时触发动态修改页面元素属性实现文字无缝滚动的功能,需要的朋友可以参考下
本文实例讲述了jQuery插件实现文字无缝向上滚动效果代码。分享给大家供大家参考，具体如下：
此插件旨在实现目前较为流行的无缝向上滚动特效，当鼠标移动到文字上时，向上滚动会停止，当鼠标离开时，向上滚动继续。整体代码如下：
<!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>
*{margin:0;padding:0;font-size:12px;}
li{list-style:none;}
.box{margin:20px;width:320px;height:195px;border:1px solid #ddd;padding:10px;overflow:hidden;}
.box ul li{line-height:25px;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>
<body>
<div class="box">
<ul>
<li>01这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
<li>02这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
<li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
<li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
<li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
<li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
<li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
<li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
<li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>
</ul>
</div>
<script>
/*
* scrollTop 0.1
* Dependence jquery-1.7.1.js
*/
;(function($){
$.fn.scrollTop = function(options){
var defaults = {
speed:30
}
var opts = $.extend(defaults,options);
this.each(function(){
var $timer;
var scroll_top=0;
var obj = $(this);
var $height = obj.find("ul").height();
obj.find("ul").clone().appendTo(obj);
obj.hover(function(){
clearInterval($timer);
},function(){
$timer = setInterval(function(){
scroll_top++;
if(scroll_top > $height){
scroll_top = 0;
}
obj.find("ul").first().css("margin-top",-scroll_top);
},opts.speed);
}).trigger("mouseleave");
})
}
})(jQuery)
</script>
<script>
$(function(){
$(".box").scrollTop({
speed:30 //数值越大 速度越慢
});
})
</script>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
QQ空间顶部折页撕开效果想必大家都有看到过吧，那么它是怎么实现的呢？下面与大家分享下2014-06-06
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
某某同学最近写了个基于jquery的信息弹出插件showInfoDialog，该插件对背景进行遮罩，然后弹出信息显示框，信息显示种类包括(操作成功/错误信息/警告信息/通知信息)感兴趣的朋友可以了解下2013-01-01
这篇文章主要介绍了使用jQuery仿苹果官网焦点图特效,非常的炫酷，需要的朋友可以参考下2014-12-12
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
本文介绍Jquery下的Ajax调试方法,Jquery Ajax 提供了全功能的 $.ajax() 方法，还有诸如 $.get()，$.getScript()，$.getJSON()，$.post() 和 $().load() 等更为简便的方法2013-12-12
这篇文章主要介绍了jQuery中offset()方法用法,实例分析了offset()方法的功能、定义及返回或设置所匹配元素相对于document对象的偏移量时的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了jquery+css实现移动端元素拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
这篇文章主要介绍了基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法的相关资料,非常具有参考借鉴价值，需要的朋友可以参考下2016-05-05![jQuery中[attribute!=value]选择器用法实例](//img.jbzj.com/images/xgimg/bcimg7.png)
jQuery中[attribute!=value]选择器用法实例
这篇文章主要介绍了jQuery中[attribute!=value]选择器用法,实例分析了[attribute!=value]选择器匹配不包含指定属性元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
本文主要通过jQuery基础知识、选择要操作的元素及处理DOM元素3个方面给我们做了下小结，非常的详尽，推荐给有需要的小伙伴。2014-12-12
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
这篇文章主要介绍了jQuery实现鼠标选中文字后弹出提示窗口效果,涉及jQuery事件响应及页面元素动态操作相关技巧,非常简便实用,需要的朋友可以参考下2016-09-09
![jQuery中[attribute!=value]选择器用法实例](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论