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 相关文章推荐
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python实现windows下文件备份脚本
2018/05/27 Python
Python collections模块使用方法详解
2019/08/28 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
安全生产责任书
2014/03/12 职场文书
规划编制实施方案
2014/03/15 职场文书
法制报告会主持词
2014/04/02 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
英语辞职信范文
2015/02/28 职场文书
创业计划书之餐饮
2019/09/02 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript