html跑马灯鼠标悬停,简单的跑马灯式滚动新闻jQuery插件

Smart Marquee是一款简单实用的跑马灯式滚动新闻jQuery插件。该插件可以在水平或垂直方向上滚动一个列表中的内容，制作类似跑马灯的效果。并可以设置循环模式，鼠标移动到列表项时会暂停新闻列表的滚动。

这个插件适用于制作滚动新闻，滚动文字，滚动图片等效果。

使用方法

使用该滚动新闻插件需要引入jQuery和jquery.smartmarquee.js文件。

HTML结构

该滚动新闻的HTML结构使用一个

作为包裹元素，里面放置一个无序列表。

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

CSS样式

需要为该滚动新闻添加一些必要的CSS样式。

.smartmarquee {

position: relative;

overflow: hidden;

}

.smartmarquee .container { position: absolute; }

初始化插件

在页面DOM元素加载完毕之后，可以通过smartmarquee()方法来初始化该滚动新闻插件。

$(document).ready(function () {

$(".example").smartmarquee();

});

配置参数

下面是该滚动新闻插件的可用配置参数。

duration：滚动动画的持续时间，单位毫秒，默认值为1000。

loop：是否循环显示，默认值为true。

interval：滚动的间隔时间，单位毫秒，默认值2000。

axis：滚动的方向，可选值有：'vertical' 或 'horizontal'。