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下载

  • 相关阅读:
    Luogu P2016 战略游戏(树形DP)
    Luogu P2486 染色(树链剖分+线段树)
    Luogu P3178 树上操作(树链剖分+线段树)
    Luogu P2590 树的统计(树链剖分+线段树)
    Luogu P2146 软件包管理器(树链剖分+线段树)
    获得spring
    网卡绑定多个ip
    描述01-配置文件咋整
    进程查看
    端口查看,进程杀死
  • 原文地址:https://www.cnblogs.com/myphoebe/p/2400399.html
Copyright © 2011-2022 走看看