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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!