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静态的动态
Sep 18 Javascript
jQuery 解析xml文件
Aug 09 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
深入理解javascript prototype的相关知识
Sep 19 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不用正则采集速度探究总结
2008/03/24 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
php文件读取方法实例分析
2015/06/20 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
python机器学习之神经网络(一)
2017/12/20 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
国际象棋商店:The Chess Store
2018/07/09 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
计算机系统管理员求职信
2014/06/20 职场文书
库房管理员岗位职责
2015/02/12 职场文书
公司市场部岗位职责
2015/04/15 职场文书
合作意向书范本
2019/04/17 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
Python作用域和名称空间的详细介绍
2022/04/13 Python
win10清理dns缓存
2022/04/19 数码科技
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers