jQuery鼠标跟随星星特效插件

当前位置:主页 > jQuery库 > 布局和界面 > jQuery鼠标跟随星星特效插件
jQuery鼠标跟随星星特效插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-04-09
    阅读:
麦子学院
简要教程

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

网友评论