jQuery鼠标跟随星星特效_鼠标经过出现星星jQuery插件3435
一款可以制作鼠标跟随星星特效的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
});                  

技术讨论区(0 个讨论)

  1. 请先登录

      发 布