浙江 杭州

jQuery网页背景灯光闪烁特效

系统分类: 网页特效 - jquery插件 - jQuery界面效果 2017-05-25

人气4888

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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图形来替代灯光图形。

查看演示
下载资源:3
下载资源
错误提交:

格式:zip 大小:12.69KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1826.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery网页背景灯光闪烁特效

我当前G币余额:0 已下载次数:3

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有2 评论)