web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
canvas
jquery和canvas炫酷星星闪烁特效插件
分类:
canvas
日期:
2024-05-14
点击(2)
评论(0)
演 示
免费下载
简介
在页面中引入jquery和jquery-canvas-sparkles.js文件。 ```html ``` ##### HTML结构 例如你需要为一张图片制作星星闪耀效果,它的HTML结构如下: ```html
``` ##### 初始化插件 在页面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); }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告