Jani: A jquery plugin that can animate a background image

Article Introduction: Jani is a jquery plugin that can animate a background image. This plugin is basically a substitute for GIF animation, but he has his benefits. All browsers support animated formats in GIF format, and no additional JavaScript code and markup are required. But the bad thing is that the GIF format has only 256 colors. And you can't control the display of the picture. This plugin

Download Address
Demo Address

Brief introduction

Jani is a jquery plugin that can animate a background image. This plugin is basically a substitute for GIF animation, but he has his benefits. All browsers support animated formats in GIF format, and no additional JavaScript code and markup are required. But the bad thing is that the GIF format has only 256 colors. And you can't control the display of the picture. The plugin displays animations by loading a vertical gif frame and then changing the background-postion of the container so that you are free to control it.

Characteristics

• Lightweight scripts
• Very easy to use
• Can be fully customized through CSS
• All browsers support

How to use

1. Download the script and include the jquery framework.

2, add the following code to the head tag:

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

3, add the corresponding style in the CSS, picture address:

1 2 3 4 5

<style type= "Text/css" > animation-1 { background: URL (./images/sample-animation.gif) No-repeat left top ; } </style>

4. Add a container to display the animation on the page:

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

5, add the following code to the head tag:

1 2 3 4 5 6

<script type= "Text/javascript" > $ (document). Ready (function () { $ ("#animation-1"). Jani ({Framewidth : frameheight: Speed, totalframes: ); $ ("#animation-1"). Jani.play (); </script>

The method of Jani

• Jani.play (); open animation
• Jani.pause (); Pause animation
• Jani.stop (); End animation

Parameters

The. Jani () method accepts several of the following parameters:

• Width of Framewidth:frame
• Frameheight: Height of the individual frame
• Speed: Animation speed
• Number of Totalframes:frame
• Loop: Loop animation, default to True

Reprint Please specify:
Author: rockux–web Front end
From: jani-animation display background image of the jquery plugin