jQuery插件实现文字无缝向上滚动效果代码


Posted in Javascript onFebruary 25, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript一点特殊用法
May 28 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
jQuery zTree加载树形菜单功能
Feb 25 #Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 #Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 #Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 #Javascript
利用jQuery中的ajax分页实现代码
Feb 25 #Javascript
Jquery zTree 树控件异步加载操作
Feb 25 #Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 #Javascript
You might like
PHP实现服务器状态监控的方法
2014/12/09 PHP
php创建多级目录的方法
2015/03/24 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python循环语句中else的用法总结
2016/09/11 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
工地资料员岗位职责
2013/12/31 职场文书
财务部总监岗位职责
2014/03/12 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
python垃圾回收机制原理分析
2022/04/13 Python
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python