JQuery实现文字无缝滚动效果(Marquee插件)
Posted on 2012 年 10 月 16 日
推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果。
此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准。
官方演示,如下:
Demo
使用方法如下:
1、加载javascript。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.marquee.js"></script>
<script type="text/javascript">
$(function(){
$("#marquee").marquee({yScroll: "bottom"});
});
</script>
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代码如下:
<ul id="marquee" >
<li><a href="http://www.bloomylife.com/?cat=153" target="_blank"> WEB前端开发</a> [2011-10-20]</li>
<li><a href="http://www.bloomylife.com/?cat=154" target="_blank"> 架构设计</a> [2011-09-20]</li>
<li><a href="http://www.bloomylife.com/?cat=157" target="_blank"> 系统运维</a> [2011-10-16]</li>
</ul>
该插件提供了许多属性选项,您可以配置定制外观和效果。
{
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
This entry was posted in JavaScript&AJAX and tagged jquery, marquee, 滚动 by zxt. Bookmark the permalink.
分享到:
相关推荐
接下来编写jQuery脚本来实现无缝滚动效果。可以创建一个函数`startMarquee()`,并在页面加载完成后调用它: ```javascript $(document).ready(function() { startMarquee(); }); function startMarquee() { var ...
推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果。 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准。 使用方法如下: 1、加载javascript。 [removed][removed...
5. **优化与调整**:根据实际需求,可以调整滚动速度(`scrollDuration`),添加平滑滚动效果,或者使用更复杂的插件来增强功能,如`jQuery.scrollable`或`jQuery.marquee`。 **注意事项:** 1. **兼容性**:虽然...
6. **jQuery插件**:除了手动编写代码,还可以使用现有的jQuery插件,如jQuery.Marquee、jQuery.ScrollText等,它们预设了多种滚动样式和参数,方便快速实现文字无缝滚动效果。 7. **CSS辅助**:CSS在实现文字滚动...
在提供的文件名列表中,我们看到一个名为 `marquee.js` 的文件,这很可能就是实现无缝滚动效果的JavaScript代码。在实际应用中,`marquee.js` 可能包含了以下关键部分: 1. **初始化函数**:这个函数通常会在页面...
jQuery Marquee插件支持许多自定义选项,以控制滚动效果。比如: - `duration`: 设置内容滚动完整长度所需时间(毫秒)。 - `delayBeforeStart`: 在开始滚动前的延迟时间(毫秒)。 - `scrollAmount`: 每次移动...
### JQuery插件Marquee.js实现无缝滚动效果 #### 描述 Marquee.js 是一个基于 JQuery 的插件,它能够帮助开发者轻松地在网页上实现文本或其他元素的无缝滚动效果。这种效果常见于新闻网站或者广告轮播场景,通过...
基于jQuery实现的marquee无缝滚动插件,能够扩展jQuery的功能,为网页添加动态的滚动效果。 知识点二:marquee元素 marquee元素是HTML中的一个标签,用于创建自动滚动的文本或图片区域。在早期的网页设计中,...
Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果。 { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000...
在网页设计中,动态效果的运用可以极大地提升用户体验,其中图片和文字的无缝滚动效果尤为常见。本文将详细介绍如何使用`liMarquee.js`这个基于jQuery的滚动插件来实现各种丰富的图片和文字滚动效果。 首先,`...
`jquery.marquee.js` 和 `jquery.marquee.min.js` 是两个jQuery插件,专门用于实现无缝滚动效果。它们提供了方便的API和方法来定制滚动速度、方向、暂停、恢复等特性。`jquery.marquee.min.js` 是`jquery.marquee.js...
在网页设计中,动态效果是吸引用户注意力的重要手段之一,jQuery作为一个强大的JavaScript库,提供了丰富的功能来实现各种动画效果,其中包括文字滚动效果。本篇将详细介绍如何使用jQuery来实现文字上下、左右以及...
在Web开发中,滚动效果常常用于吸引用户的注意力,jQuery.marquee.js就是一款专为实现这种滚动效果而设计的JavaScript插件。该插件基于广泛使用的jQuery库,使得创建无缝、自定义的滚动效果变得简单易行。本文将对...
`jQuery kxbdMarquee` 是一个基于 jQuery 的插件,用于实现网页元素的无缝滚动效果。该插件可以方便地应用于需要水平或垂直滚动显示内容的场景,如新闻滚动条、公告栏等。与传统的 HTML `marquee` 标签相比,`jQuery...
本篇文章将详细讲解如何利用jQuery实现这样的无缝滚动效果。 首先,我们需要了解基本的HTML结构。在示例中,HTML代码包含一个类名为`box`的`div`元素,内部有一个`ul`列表,其中包含若干个`li`列表项。这个简单的...
本文介绍如何使用jquery库来实现一个简单的纵向无缝滚动效果。首先,需要在HTML中编写基本的结构,包括一个滚动容器和内容列表。其次,使用CSS对滚动容器及其内容进行样式设置,确保滚动效果的平滑和视觉效果。最后...