jQuery网页背景灯光闪烁特效

当前位置:主页 > jQuery库 > 布局和界面 > jQuery网页背景灯光闪烁特效
jQuery网页背景灯光闪烁特效
分享:

    插件介绍

    Starlight.js是一款可以制作炫酷网页背景灯光闪烁特效的jQuery插件。你可以通过该插件定义任何比例的闪烁灯光效果,也可以在多个元素中应用灯光效果。在Banner中使用它可以得到非常炫酷的效果。

    浏览器兼容性

    浏览器兼容性
    时间:06-30
    阅读:
简要教程

Starlight.js是一款可以制作炫酷网页背景灯光闪烁特效的jQuery插件。你可以通过该插件定义任何比例的闪烁灯光效果,也可以在多个元素中应用灯光效果。在Banner中使用它可以得到非常炫酷的效果。

使用方法

使用该灯光闪烁特效需要引入jQuery和starlight.js,以及sample.css文件。

<link rel="stylesheet" href="css/sample.css">
<script src="js/jquery.min.js"></script>
<script src="js/starlight.js"></script>              
              
HTML结构

在你需要制作灯光闪烁效果的元素上添加starlight class。

<div class="starlight"></div>         
              

完成上面的步骤之后就可以使用该灯光闪烁效果了。

配置参数

如果你需要自定义该灯光闪烁特效的一些参数,可以直接在starlight.js文件中修改user_configuration配置。可用的参数如下:

  • shape:灯光的形状,可以是circlesquare
  • initial_size:灯光的初始尺寸,例如32px
  • final_size:灯光扩展后的最终尺寸。
  • expand_speed:灯光扩展(闪烁)的速度,CSS时间,例如1s
  • fade_delay:灯光开始闪烁前的延迟时间,CSS时间,例如1s
  • fade_duration:灯光闪烁的持续时间,CSS时间,例如0.5s
  • colors:一组可用的灯光颜色,灯光闪烁时会随机挑选一种颜色。可以使任何CSS可用的颜色,例如rgba(255,255,255,0.5)
  • frequency:灯光产生时间的延迟,单位毫秒,例如250
  • density:每一波有多少灯光产生,例如:5。
  • keep_lit:灯光是否淡出。可以设置truefalse
  • rotation:灯光是否旋转。可以设置truefalse
  • coverage:灯光会出现在元素区域的位置。可选范围0-1,例如0.75表示75%的元素区域。
  • target_class:灯光闪烁的元素的class,例如.starlight
  • custom_svg:该属性目前还未被支持。是否使用自己的SVG图形来替代灯光图形。