JQuery文字无缝滚动效果实现方法

小云云

发布时间：2018-01-23 10:33:09

1962人浏览过

来源于php中文网

原创

本文主要介绍了jquery实现文字无缝滚动效果示例代码(marquee插件)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

推荐一个JQuery的无缝文字滚动效果，同时也可以滚动图片，也叫做跑马灯效果。

此jquery插件，依托jquery库，能实现各种滚动效果，且让HTML代码符合W3C标准。

使用方法如下：

1、加载javascript。

2、加入CSS样式。

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;}

3、HTML代码如下：

    
 WEB前端开发 [2011-10-20]    
 架构设计 [2011-09-20]    
 系统运维 [2011-10-16]

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

jQuery-实现文字无缝滚动效果

jQuery文字无缝滚动效果代码下载。

下载

{      
 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      // 滚动完了回调函数 
}

jquery.marquee.js可以到官网地址下载：http://www.givainc.com/labs/marquee_jquery_plugin.htm

相关标签:

jquery jquery JS http

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：两种jQuery实现选项卡功能的方法下一篇：JS监控关闭浏览器操作的实例详解

作者最新文章

JS实现的ajax和同源策略详解

2018-05-30 11:59

最新php程序员工具箱 v1.0版本介绍

2018-07-11 14:50

Vue filter介绍及其使用

2018-05-30 14:37

JS 数字和字符串之间相互转化详解

2018-05-31 09:06

Dreamweaver网页中添加电子邮箱链接的实例分享

2018-05-30 15:06

vue-cli 自定义指令directive 添加验证滑块详解

2018-05-31 10:32

PHP之IMAP收取邮件实例详解

2018-05-31 09:37

php基础知识笔记分享

2018-05-30 14:28

Redis常见的使用场景分享

2018-05-31 09:31

微信小程序文件类API详解

2018-05-30 14:22

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

151

2023.09.12

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

312

2023.10.13

jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

396

2023.11.10