zoukankan      html  css  js  c++  java
  • skitter 插件使用

    Skitter 是一个 jQuery 插件,它帮我们把杂乱无序的图片以相当精彩的动画效果进行幻灯片展示(Slideshow)。图片可以自动变换,也可以通过“前一个”,“后一个”进行翻页。

    这个插件最大的特色是,它在翻页或滑动时有非常多的动画效果,比如立方体形、管道形等等。它还给用户提供一系列选项进行最大限度的自定义,例如,动画速度,转换间隔,图片文字标签的设置等。

    另一个不错的特性是,它可以提醒每一幅幻灯片的动画的类型,这样可以使我们在一个幻灯片展示中使用多个动画效果。

    1.<div class="img_Slide box_skitter_large">

    <ul>

    <li><a href="javascript:;"><img src="images/index_lb_img1.jpg" width="817" height="422" class="cube" /></a></li>

    <li><a href="javascript:;"><img src="images/index_lb_img2.jpg" class="cubeRandom" /></a></li>

    </ul>

    </div>

    2.再加一个skitter样式<link href="css/skitter.styles.css" type="text/css" />

    3.Skitter的使用 四个插件加一段js代码

    <script src="js/jquery-1.6.3.min.js"></script>

    <script src="js/jquery.easing.1.3.js"></script>

    <script src="js/jquery.skitter.min.js"></script>

    <script src="js/jquery.animate-colors-min.js"></script>使他会随着图片的变换也跟这变

    Skitter <wbr>jQuery <wbr>插件


    4.Js:

    {numbers_align:"center",show_randomly: true, navigation: false,(是否有左右方向箭头) dots: true,(滚动点为圆点,若为false时,则是方块的1.2.3) interval: 4000(表示速度,数值越大,速度越小),fullscreen:true(全屏),focus: true(焦点在中间加一个小圆焦点,点击会在中间),controls: true(可以控制停止), }

    $(document).ready(function() {

    $('.box_skitter_large').skitter({

    numbers_align: "center",

    dots: true,

    preview: true,

    focus: true,

    focus_position: "leftTop",

    controls: true,

    controls_position: "leftTop",

    progressbar: true,

    progressbar_css: {

    top:'5px',

    left:'590px',

    height:10,

    borderRadius:'2px',

    200,

    backgroundColor:'#000',

    opacity:.7

    },

  • 相关阅读:
    02_java基础学习_基础语法(上)01_day02总结
    EditPlus如何设置保存时不产生.bak备份文件?
    UltraEdit(UE)如何设置去掉.bak备份文件?
    如何在win10上连接苹果无线键盘
    01_java基础学习_Java概述_day01总结
    Python 提取Twitter tweets中的元素(包括text, screen names, hashtags)
    #leetcode#Path Sum II
    怎样实现广度优先遍历(BFS)
    GCD编程-串行队列与并发队列
    在对方电脑建立IPC连接, 利用IPC$入侵 运行木马
  • 原文地址:https://www.cnblogs.com/lanzhiyuan/p/8145482.html
Copyright © 2011-2022 走看看