jQuery鼠标跟随星星特效插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

jquery-stars是一款可以制作鼠标跟随星星特效的jQuery插件。你可以自定义跟随鼠标移动的星星的数量，颜色，范围等，也可以使用自定义的图片来代替星星。

使用方法

HTML结构

你可以指定一个容器，在这个容器中生成鼠标跟随星星特效。

<div class="container"></div>

初始化插件

在页面DOM元素加载完毕之后，可以通过jstars()方法来初始化该插件。

$('#container').jstars({
    image_path: 'images', // folder with stars assets
    style: 'white',          // optional, star color, default = white
    frequency: 5          // optional, from 1 to 19
});

配置参数

下面是该鼠标跟随插件可用的配置参数：

image_path：默认值：''。图片的路径。
image：默认值：'jstar-map.png'。图片的名称。
style：默认值：'white'，星星的颜色。
frequency：默认值：12。星星的数量。
style_map：默认值：这是一个对象，用于标识雪碧图中每一行的坐标。
width：默认值：单个星星的宽度。
height：默认值：单个星星的高度。
delay：默认值：星星旋转的速度。

jQuery('#example-rand').jstars({
  image_path: '', // this is requried option
  image: 'jstar-map.png', // this is requried option
  style: 'white',
  frequency: 12,
  // if you check the sprite image you will see it has
  // several rows of different colors
  // style map sets the coordinates of each row
  style_map: { 
    white: 0,
    blue: -27,
    green: -54,
    red: -81,
    yellow: -108
  },
  width: 27, // single star width
  height: 27, // single star height
  delay: 300 // rotate speed
});

jquery-stars插件的github地址为：https://github.com/justcoded/jquery-stars