jQuery插件实现文字无缝向上滚动效果代码
2016-02-25 00:00
1501 查看
本文实例讲述了jQuery插件实现文字无缝向上滚动效果代码。分享给大家供大家参考,具体如下:
此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续。整体代码如下:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery插件实现无缝滚动特效
jQuery插件scroll实现无缝滚动效果
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
JQuery插件iScroll实现下拉刷新,滚动翻页特效
自己使用jquery写的一个无缝滚动的插件
jquery自定义滚动条插件示例分享
jquery 页面滚动到底部自动加载插件集合
jquery滚动条插件jScrollPane的使用介绍
六款帮助你实现惊艳视差滚动效果的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程序设计有所帮助。
您可能感兴趣的文章:
jquery插件之文字间歇自动向上滚动效果代码jQuery插件实现无缝滚动特效
jQuery插件scroll实现无缝滚动效果
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
JQuery插件iScroll实现下拉刷新,滚动翻页特效
自己使用jquery写的一个无缝滚动的插件
jquery自定义滚动条插件示例分享
jquery 页面滚动到底部自动加载插件集合
jquery滚动条插件jScrollPane的使用介绍
六款帮助你实现惊艳视差滚动效果的jQuery插件
相关文章推荐
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
- jQuery使用zTree插件实现树形菜单和异步加载
- jQuery iScroll.js 移动端滚动条美化插件第1/5页
- Jquery读取返回的JSON数据
- 用jquery给元素动态绑定事件及样式
- jquery 绘图工具 flot 学习笔记
- 造轮子:JQuery实现ajax跨域
- 移动web开发前准备知识了解(html5、jquery)笔记
- jquery中如何防止冒泡事件
- jQuery之获取标签
- jQuery之#id选择器
- jQuery显示隐藏密码插件jquery.toggle-password演示
- JQuery面试题答案
- jQuery多次选中checkbox失效
- jQuery多次选中checkbox失效
- 轻巧的jQuery提示框插件Tipso演示
- 使用jquery-mockjax模拟ajax请求做前台測试
- jquery获取和失去焦点改变样式
- 微信iOS端无法执行jquery on()方法
- JQuery中的html(),text(),val()区别