当前位置：首页 > 网页特效 > canvas

jquery和canvas炫酷星星闪烁特效插件

分类：canvas 日期：2024-05-14 点击(2) 评论(0)

简介

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

```html
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-canvas-sparkles.js"></script>  
``` 
#####  HTML结构
例如你需要为一张图片制作星星闪耀效果，它的HTML结构如下：

```html
<div class="demo">
    <img id="image" src="demo.jpg">
</div>    
```                
#####  初始化插件
在页面DOM元素加载完毕之后，通过sparkle()方法来初始化该jquery星星闪耀插件。

```html
$(".element").sparkle();          
```
#####  配置参数
该jquery和canvas炫酷星星闪烁特效插件的可用配置参数有：

```html
$(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的尺寸，并改变星星的位置。

例如：

```html
// 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);
});       
```

web299.com

jquery和canvas炫酷星星闪烁特效插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果