JQuery插件Marquee.js实现无缝滚动效果


Posted in Javascript onApril 26, 2016

Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果。

{   
yScroll: "top"  // 初始滚动方向 (还可以是"top" 或 "bottom") 
showSpeed: 850  // 初始下拉速度
scrollSpeed: 12  // 滚动速度   ,
pauseSpeed: 5000  // 滚动完到下一条的间隔时间  
pauseOnHover: true // 鼠标滑向文字时是否停止滚动  
loop: -1    // 设置循环滚动次数 (-1为无限循环) 
fxEasingShow: "swing" // 缓冲效果  
fxEasingScroll: "linear" // 缓冲效果  
cssShowing: "marquee-showing" //定义class //
event handlers  
init: null    // 初始调用函数  
beforeshow: null   // 滚动前回调函数  
show: null     // 当新的滚动内容显示时回调函数  
aftershow: null   // 滚动完了回调函数 
}

详细代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>marquee测试</title> 
<script type="text/javascript" src="../../jquery/jquery.js"></script> 
<script type="text/javascript" src="../marquee/lib/jquery.marquee.js"></script> 
<script type="text/javascript"> 
 $(function(){  
   $("#marquee").marquee({ 
   yScroll: "bottom", 
   showSpeed: 850,  // 初始下拉速度   , 
   scrollSpeed: 12,  // 滚动速度   , 
   pauseSpeed: 500,  // 滚动完到下一条的间隔时间   , 
   pauseOnHover: true, // 鼠标滑向文字时是否停止滚动   , 
   loop: -1 ,    // 设置循环滚动次数 (-1为无限循环)   , 
   fxEasingShow: "swing" , // 缓冲效果   , 
   fxEasingScroll: "linear", // 缓冲效果   , 
   cssShowing: "marquee-showing" //定义class 
 
   }); 
 }); 
</script> 
 
<style> 
 ul.marquee { 
  display: block; 
  line-height: 1; 
  position: relative; 
  overflow: hidden; 
  width: 400px; 
  height: 22px; 
 } 
 ul.marquee li { 
  position: absolute; 
  top: -999em; 
  left: 0; 
  display: block; 
  white-space: nowrap; 
  padding: 3px 5px; 
  text-indent:0.8em 
 } 
</style> 
 
</head> 
 
<body > 
 
 
<ul id="marquee" class="marquee">   
<li><a href="#" target="_blank">WEB前端开发</a> [2011-10-20]</li>   
<li><a href="#" target="_blank">架构设计</a> [2011-09-20]</li>   
<li><a href="#" target="_blank">系统运维</a> [2011-10-16]</li>  
</ul> 
 
</body> 
</html>

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
javascript调试说明
Jun 07 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
chrome调试javascript详解
Oct 21 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
node.js实现登录注册页面
Apr 08 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 #Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 #Javascript
Bootstrap网格系统详解
Apr 26 #Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 #Javascript
Bootstrap按钮组件详解
Apr 26 #Javascript
Bootstrap每天必学之警告框插件
Apr 26 #Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 #Javascript
You might like
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
js资料toString 方法
2007/03/13 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
Underscore源码分析
2015/12/30 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
Python反转序列的方法实例分析
2018/03/21 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
windows支持哪个版本的python
2020/07/03 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
列车长先进事迹材料
2014/01/25 职场文书
优秀学生事迹材料
2014/02/08 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
同事欢送会致辞
2015/07/31 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
MySQL七大JOIN的具体使用
2022/02/28 MySQL
A22国内电台短波广播频率表
2022/05/10 无线电