鼠标悬停闪烁星星插件jQuery-canvas-sparkles

查看演示立即下载

插件描述：jQuerycanvassparkles是一款jquery和canvas炫酷星星闪烁特效插件。该插件可以在DOM元素上制作出漂亮的星星闪烁效果。你可以指定星星的数量、颜色、尺寸和运动方向等。

使用方法

在页面中引入jquery和jquery-canvas-sparkles.js文件。

1 2	`<script` `src="/"></script>` `<script` `src="dist/jquery-canvas-sparkles.js"></script>`

HTML结构

例如你需要为一张图片制作星星闪耀效果，它的HTML结构如下：

<div >
   <img id="image" src="demo.jpg">
</div>

初始化插件

在页面DOM元素加载完毕之后，通过sparkle()方法来初始化该jquery星星闪耀插件。

1	`$(".element").sparkle();`

配置参数

该jquery和canvas炫酷星星闪烁特效插件的可用配置参数有：

$(document).ready(function() {
    $("img").sparkle({
        //颜色：接收HEX字符串，或者“rainbow”关键字，或一组HEX字符串
        color: ["#2eafea", "#e56604"],
        //一次显示星星的数量
        count: 30,
        // 距离canvas边部多少将会重叠
        overlap: 0,
        // 设置速度
        speed: 1,
        // 最小尺寸
        minSize: 4,
        // 最大尺寸
        maxSize: 7,
        //星星运动的方向，可以是"up", "down" 或 "both"
        direction: "both"
    });
});

事件

可以通过下面的事件来触发星星的开始、接收和改变尺寸。

start.sparkle：触发星星开始闪烁。
stop.sparkle：结束星星闪烁。
resize.sparkle：动态修改canvas的尺寸，并改变星星的位置。

例如：

// first we need an element with sparkles
$("header").sparkle();
 
// here we can remove the default mouse/keyboard triggers for sparkles,
// perhaps we don't want them to trigger on interaction
$("header")
   .off("mouseover.sparkle")
   .off("mouseout.sparkle")
   .off("focus.sparkle")
   .off("blur.sparkle")
 
// we can also trigger the start/stop events on the element
// which has the sparkles bound to it!
$("header")
   .trigger("start.sparkle")
   .on("click", function() {
       $(this).trigger("stop.sparkle");
   });
     
// it's also possible to resize teh canvas and reposition 
// the sparkles whenever the browser is resized...
var timer;
$(window).on("resize", function(){
   clearTimeout(timer);
   timer = setTimeout(function(){
       $("header").trigger("resize.sparkle");
   },200);
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery 2048小游戏
下一个特效： jQuery随机验证码