zoukankan      html  css  js  c++  java
  • jQuery插件simplyScroll插件跑马灯效果

    SimplyScroll是一个能使一系列元素自动或手动、水平或垂直卷动的jQuery插件,能够接收Flickr feed动态图片或JSON源图片,功能非常强大,能实现丰富的效果。

    使用说明
    需要使用jQuery库文件simplyScroll库文件
    需要自定义显示元素(如,图片)的CSS样式

    使用实例
    一,包含文件部分

    1. <script type="text/javascript" src="/jquery.js"></script>
    2. <script type="text/javascript" src="jquery.simplyscroll.js"></script>
    3. <link rel="stylesheet" href="jquery.simplyscroll.css" media="all" type="text/css">

    二,HTML部分

    1. <ul id="scroller">
    2. <li><img src="image1.jpg" width="290" height="200"></li>
    3. <li><img src="image2.jpg" width="290" height="200"></li>
    4. <li><img src="image3.jpg" width="290" height="200"></li>
    5. </ul>

    三,javascript部分

    1. <script type="text/javascript">
    2. (function($) {
    3. $(function() {
    4. $("#scroller").simplyScroll({
    5. autoMode: 'loop',
    6. });
    7. });
    8. })(jQuery);
    9. </script>

    上面实例可知,使用jQuery插件simplyScroll非常简单,定义需要显示的元素(如实例中的图片)就可实现卷动效果。

    simplyScroll参数清单(具体大家可查看jQuery插件simplyScroll的JS库文件)

    • className    'smooth-scroll'    CSS类名
    • frameRate    24    每秒移动或frame的数量
    • speed    1            每frame移动的像素
    • horizontal    true    移动的方向,水平或垂直
    • autoMode 'off'    是否启动自动模式   loop或bounce
    • pauseOnHover    true    当鼠标悬停时是否暂停
    • flickrFeed    ''    调用JSON使用flickr feed路径
    • jsonSource    ''    调用本地JSON
    • jsonImgWidth    240    Flickr/JSON 的图片宽度
    • jsonImgHeight    180    Flickr/JSON 的图片高度

    demo下载

  • 相关阅读:
    Vue学习笔记(4)-带参数路由,嵌套路由,编程式导航
    JS数组&&数组对象去重
    Vue学习笔记(3)-品牌管理系统
    Vue学习笔记(2)-组件生命周期
    负margin
    CSS布局奇淫巧计之-强大的负边距
    由浅入深漫谈margin属性
    双飞翼布局和圣杯布局的对比
    圣杯布局的实现过程
    CSS实现垂直居中的5种方法
  • 原文地址:https://www.cnblogs.com/myphoebe/p/2400399.html
Copyright © 2011-2022 走看看