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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
初步了解javascript面向对象
Nov 09 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
JS中Safari浏览器中的Date
Jul 17 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
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实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
js实现右键菜单功能
2016/11/28 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
js中实例与对象的区别讲解
2019/01/21 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python解决鸡兔同笼问题的方法
2014/12/20 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python实现随机选择元素功能
2017/09/14 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
董存瑞观后感
2015/06/11 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
python字符串的一些常见实用操作
2022/04/06 Python