zoukankan      html  css  js  c++  java
  • Js_动画显示背景图片

    jAni是一个可以动画显示背景图片的jQuery插件。这个插件基本上是GIF动画的一个替代品,但是他有他的好处。所有浏览器都支持GIF形式的动画格式,而且也不需要额外的javaScript代码和标记。但是不好的一点是,GIF格式的图片只有256色。而且你不能控制图片的显示。这个插件通过载入垂直的GIF帧,然后改变容器的background-postion来显示动画,这样你就可以自由控制了。

    特色

    • 轻量级的脚本
    • 很容易使用
    • 可以通过CSS完全定制
    • 所有浏览器都支持

    如何使用

    1、下载脚本,并包含jquery框架。

    2、添加下面的代码到head标签中:

    1
    2
    
    <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../jani.js"></script>

    3、在CSS中添加相应的样式,图片地址:

    1
    2
    3
    4
    5
    
    <style type="text/css">
    .animation-1 {
    background: url(./images/sample-animation.gif) no-repeat left top;
    }
    </style>

    4、在页面中添加一个显示动画的容器:

    1
    
    <div id="animation-1"></div>

    5、在head标签中添加下面的代码:

    1
    2
    3
    4
    5
    6
    
    <script type="text/javascript">
    $(document).ready(function(){
    $('#animation-1').jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 });
    $('#animation-1').jani.play();
    });
    </script>

    jAni的方法

    • jani.play();开启动画
    • jani.pause();暂停动画
    • jani.stop();终止动画

    参数

    .jani()方法接受下面的几个参数:

    • frameWidth:frame的宽度
    • frameHeight :单独框架的高度
    • speed:动画速度
    • totalFrames:frame的数量
    • loop:是否循环动画,默认为true
  • 相关阅读:
    汇编实现点亮Led灯(2440)
    BootLoader(2440)核心初始化代码
    学习单片机的正确方法(转载)
    ARM-汇编指令集(总结)
    BootLoader的架构设计
    统计单词数(WordCount)
    OPcache
    phpcon china 2017听讲总结
    php-fpm进程内存泄漏
    mysql字符串的隐式转换导致查询异常
  • 原文地址:https://www.cnblogs.com/ingstyle/p/4668319.html
Copyright © 2011-2022 走看看