fxMarquee

fxMarquee

• 作者：绯雨
• 版本：1.0.0
• 授权：Apache Licence 2.0

目录

1. 介绍
2. 演示
3. 参数说明
4. 教程
5. 下载
6. 兼容性
7. 反馈

介绍

fxMarquee 是一个jQuery内容滚动插件。它可以让一组内容定向滚动，并可以设置滚动速度。本插件具有以下特点：

• 可以上、下、左、右四个方向滚动。可设置鼠标移上时停止滚动。
• 支持自定义的加速按钮。

演示

演示一

• 多力2

• 多力3

• 多力4

• 多力5

• 多力6

• 多力1

• 多力2

• 多力3

• 多力4

• 多力5

• 多力6

• 多力1

<< >>

---

演示二

• 各地日全食精华瞬间回放
• 中俄军演举行实兵实弹演练
• 天文爱好者乘飞机追拍日全食
• 首轮中美战略与经济对话议程公布
• 黑龙江鸡西煤矿发生水灾23人被困
• 印尼爆炸嫌犯过安检录像
• 各地日全食精华瞬间回放
• 中俄军演举行实兵实弹演练
• 天文爱好者乘飞机追拍日全食
• 首轮中美战略与经济对话议程公布
• 黑龙江鸡西煤矿发生水灾23人被困
• 印尼爆炸嫌犯过安检录像

参数说明

基本结构：

$(object).fxMarquee(options[,button1[,button2[,buttonN]]]);

属性	类型	说明
object		表示需要滚动的对象。可以是选择器，也可以是一个DOM对象。
options	object	设置的参数列表，具体意义如下： {      amount: 1,        //每次移动的象素量。      speed: 20,        //移动速度，单位：毫秒。越小越快      hover: true,      //是否鼠标移上时停止滚动。      direction: 'left' //移动方向。left、right、up、down  }
button1...N	object	一个或多个用于加速滚动的按钮配置项。具体配置属性见下： {      object: '.back-button', //表示加速滚动按钮的类型      type: 'back',           //按钮的类型。back或者next（往后或往前）      hover:{                 //如果设置hover，表示该按钮响应鼠标悬停事件          amount:2,           //当鼠标悬停时的移动象素量。          speed:10            //当鼠标悬停时的移动速度。      },      mousedown:{             //如果设置mousedown，表示该按钮响应鼠标点下事件          amount:5,           //当鼠标点下时的移动象素量。          speed:10            //当鼠标点下时的移动速度。      }  } 当只设置了object和type，不设置hover,mousedown参数，则表示启用hover和mousedown，并按默认设置进行配置。

教程

第一步。将jquery库和本插件引入到html中。例：

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.fxMarquee.js"></script>

第二步。编写滚动的HTML。例：

<div class="marqueeDemo"> 
    <ul> 
        <li><img src="pic/1.jpg" /><p>多力1</p></li> 
        <li><img src="pic/2.jpg" /><p>多力2</p></li> 
        <li><img src="pic/3.jpg" /><p>多力3</p></li> 
        <li><img src="pic/4.jpg" /><p>多力4</p></li> 
        <li><img src="pic/5.jpg" /><p>多力5</p></li> 
    </ul> 
</div>

第三步。编写css样式。例：

/* 滚动列表的父级 */ 
.marqueeDemo { 
    position:relative;    /* 必加 */ 
    overflow:hidden;    /* 必加 */ 
    width:500px;        /* 可显示的区域宽度 */ 
    height:130px;        /* 可显示的区域高度 */ 
} 
 
/* 滚动列表 */ 
.marqueeDemo ul { 
    position:absolute;    /* 必加 */ 
    zoom:1;                /* 如果是横向滚动，用于清除浮动 */ 
} 
 
.marqueeDemo ul:after {    /* 如果是横向滚动，用于清除浮动 */ 
    content:".";  
    display:block;  
    height:0; 
    clear:both;  
    visibility:hidden; 
} 
 
/* 列表里的每一项 */ 
.marqueeDemo li { 
    float:left;            /* 如果是横向滚动，必须浮动 */ 
    width:130px;        /* 每一项的宽度 */ 
    height:130px;        /* 每一项的高度 */ 
}

第四步。在head内加入插件执行代码。例：

<script type="text/javascript"> 
$(function() { 
    $(".marqueeDemo").fxMarquee({ 
        direction: 'right' 
    }); 
}); 
</script>

下载

• jquery.fxMarquee.js (3.53KB 未压缩，适合学习、调错)
• jquery.fxMarquee.pack.js (2KB js Packer压缩，适合网站发布时使用)
• jquery.fxMarquee.min.js (2.38KB js Minified压缩，适合开启GZip的网站发布时使用)

浏览兼容性

fxMarquee 在以下浏览器测试通过：

• Internet Explorer 6+
• Firefox 2+
• Safari 2+
• Opera 9+
• Chrome

jQuery 浏览器兼容性

反馈

如有任何问题、建议、BUG等，请在我的博客进行反馈。

• 个人博客发布页
• 博客园发布页