jquery插件之文字间歇自动向上滚动效果代码
2016-02-25 00:00
1311 查看
本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码。分享给大家供大家参考,具体如下:
此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续。整体代码如下:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery插件scroll实现无缝滚动效果
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
JQuery插件iScroll实现下拉刷新,滚动翻页特效
自己使用jquery写的一个无缝滚动的插件
jquery自定义滚动条插件示例分享
jquery 页面滚动到底部自动加载插件集合
jquery滚动条插件jScrollPane的使用介绍
六款帮助你实现惊艳视差滚动效果的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:5px 5px 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>03这是一个无缝向上滚动的特效,是我第一次写这样的插件</li> <li>04这是一个无缝向上滚动的特效,是我第一次写这样的插件</li> <li>05这是一个无缝向上滚动的特效,是我第一次写这样的插件</li> <li>06这是一个无缝向上滚动的特效,是我第一次写这样的插件</li> <li>07这是一个无缝向上滚动的特效,是我第一次写这样的插件</li> <li>08这是一个无缝向上滚动的特效,是我第一次写这样的插件</li> <li>09这是一个无缝向上滚动的特效,是我第一次写这样的插件</li> </ul> </div> <script> /* * textSlider 0.1 * Dependence jquery-1.7.1.js */ ;(function($){ $.fn.textSlider = function(options){ var defaults = { //初始化参数 scrollHeight:25, line:1, speed:'normal', timer:2000 }; var opts = $.extend(defaults,options); this.each(function(){ var timerID; var obj = $(this); var $ul = obj.children("ul"); var $height = $ul.find("li").height(); var $Upheight = 0-opts.line*$height; obj.hover(function(){ clearInterval(timerID); },function(){ timerID = setInterval(moveUp,opts.timer); }); function moveUp(){ $ul.animate({"margin-top":$Upheight},opts.speed,function(){ for(i=0;i<opts.line;i++){ //只有for循环了才可以设置一次滚动的行数 $ul.find("li:first").appendTo($ul); } $ul.css("margin-top",0); }); }; timerID = setInterval(moveUp,opts.timer); }); }; })(jQuery) </script> <script> $(function(){ $(".box").textSlider({ line:2 }); }) </script> </body> </html>
更多关于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插件实现文字无缝向上滚动效果代码
- 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获取和失去焦点改变样式