zoukankan      html  css  js  c++  java

  • fxMarquee

    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;    /* 必加 */ 
        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;            /* 如果是横向滚动，必须浮动 */ 
        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等，请在我的博客进行反馈。
  • 相关阅读:
    sass的安装
    git上传项目到github教程
    v-if 和v-show的区别
    es5实现数组去重
    原生js实现选中所有的checkbox
    拨打手机号
    H5页面打开小程序
    h5 网页 直接唤起淘宝app，并跳转到对应商品页面
    webstorm配置git
    elementUi 日历添加可选区间（只能选择一个月的时间段）
  • 原文地址：https://www.cnblogs.com/luluping/p/1529722.html
Copyright © 2011-2022 走看看