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

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

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

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

使用方法如下：

1、加载javascript。

$(function(){

$("#marquee").marquee({yScroll: "bottom"});

});

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]

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

{

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

php无缝滚动文字,JQuery文字无缝滚动效果实现方法相关推荐

html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: JavaScript实现文字与图片的拖拽效果 *{padding:0;margin:0;} . ...
html用jq设置动态效果,jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画语法: $(selector).animate({params},spee ...
css3滚动倾斜,jQuery 3D倾斜滚动页面效果
tiltedpage-scroll是一款十分美妙的jQuery 3D倾斜图片插件.使用这个插件你可以做成一个很漂亮的3d倾斜图片滚动效果. HTML结构 ... ... ... ... 调用方法首先 ...
ajax实现滚动刷新,jquery如何实现滚动自动加载
前提:引入jquery文件. html 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 css *{ margin: 0; paddin ...
玩转Jquery中的动画效果(animate方法)
jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法: $(selector).animate({params},speed,callba ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...
html自动滚动代码,html文字无缝滚动代码
实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体",SimSun,serif; background:#fff; color:#000; } .s ...
jq文字无缝滚动代码(鼠标悬停停止滚动)
jq实现文字无缝滚动代码(鼠标悬停停止滚动) 效果图直接copy就能运行 <!DOCTYPE html> <html lang="en"> <hea ...
html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...

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

php无缝滚动文字,JQuery文字无缝滚动效果实现方法相关推荐

最新文章

热门文章