sparkle.jquery.js-基于SVG的jQuery星星閃耀特效插件

jopen 8年前發布 | 27K 次閱讀 jQuery SVG

sparkle.jquery.js是一款可以制作炫酷的星星閃耀效果的 jQuery插件 。該插件基于 SVG 來制作星星閃耀效果，你可以控制星星的顏色，邊框色，大小，延遲時間等屬性。

sparkle.jquery.js-基于SVG的jQuery星星閃耀特效插件

查看演示 下載插件

使用方法

使用該星星閃耀插件需要在頁面中引入sparkle.css，jQuery和sparkle.jquery.js文件。

HTML結構

可以直接使用一個

元素來包裹要制作星星閃耀效果的文本。
jQuery之家

CSS樣式

文本要足夠大才會有較好的效果，另外背景色要使用較深的顏色。

body {
  background-color: #1d1f20;
  margin: 0;
  padding: 20px;
}

#main {
  color: #666;
  display: inline-block;
  font-size: 200%;
  font-weight: bold;
}

初始化插件

在頁面DOM元素加載完畢之后，可以通過sparkle()方法來初始化該星星閃耀特效插件。

$("#main").sparkle();

你也可以在同一個元素上添加多個星星閃耀效果。

$("#main").sparkle({
  size: 30
}).sparkle({
  size: 30
}).sparkle({
  delay: 1000,
  size: 10,
  pause: 750
});

如果要銷毀這個星星閃耀特效，可以使用下面的語句：

$("#main").sparkle("destroy");

配置參數

sparkle.jquery.js-基于SVG的jQuery星星閃耀特效插件

來源：http://www.htmleaf.com/html5/SVG/201602283157.html

來自： http://www.html5cn.org/article-9370-1.html

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
  本文地址：http://www.baiduhome.net/news/view/bb0a54