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

所属分类:UI,其他-悬停,动画效果

 29365  410  查看评论 (6)
分享到微信朋友圈
X
鼠标悬停闪烁星星插件jQuery-canvas-sparkles ie兼容10

使用方法

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

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="dist/jquery-canvas-sparkles.js"></script>

HTML结构

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

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

初始化插件

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

$(".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);
});
相关插件-悬停,动画效果

很酷的鼠标悬浮动画

很酷的鼠标悬停三维倾斜动画,提供了8种效果
  悬停
 34983  522

jQuery图片边框线条动画效果

本案例的主要效果是鼠标悬停在图片上,从其中的两个角分别延伸出两条线 类似两条河流交汇的效果
  悬停
 39136  435

c的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用。
  悬停
 34581  383

css3 tranfm鼠标悬停旋转

jquery加css3实现 tranfm鼠标悬停旋转效果
  悬停
 32535  426

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?(??? ? ???)? 0
    2019/7/3 15:26:12
    糖 Sir 0
    2019/5/17 15:06:59
    挺好看的,顶个 回复
    ° 本小豪 0
    2018/11/23 13:25:45
    怎样去掉划过事件,直接展现呢 回复
    初听不识曲中意 0
    2018/11/14 14:54:54
    讲解的很详细。 回复
    λ?θη? 0
    2018/9/28 10:05:57
    柚子好像酸" 0
    2018/8/13 11:34:59
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复