博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

fxMarquee

Posted on 2009-07-23 21:30  linFen  阅读(840)  评论(0)  编辑  收藏  举报

fxMarquee

目录

  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>

下载

浏览兼容性

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

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

jQuery 浏览器兼容性

反馈

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