转载

创意星球大战样式jQuery水平进度条插件

简要教程

ProgressBarWars是一款以星球大战为主题的创意jQuery水平进度条插件。该进度条的样式使用彩色霓虹效果，仿造星球大战中的激光剑效果。

最近随着《星球大战7：原力觉醒》的上映，欧美再次掀起了一股星球大战热。各种以星球大战为主题的js和CSS特效纷纷被星迷们制作和分享出来。这款水平进度条就是以星球大战的激光剑为样板而制作的。

查看演示 下载插件

使用方法

使用该水平进度条插件需要引入jQuery和ProgressBarWars.js、ProgressBarWars.css文件。

<link rel="stylesheet" href="ProgressBarWars.css"> <script src="jquery.min.js"> </script> <script src="ProgressBarWars.js"></script>

HTML结构

该水平进度条的HTML结构使用一个空的<div>元素作为进度条的容器即可。

<div id="example1"></div> <div id="example2"></div> <div id="example3"></div> <div id="example4"></div>

初始化插件

在页面DOM元素加载完毕之后，可以通过ProgressBarWars()方法来初始化该进度条插件。

$("#example1").ProgressBarWars({porcentaje:80,estilo:"vader",tiempo:5980}); $("#example2").ProgressBarWars({porcentaje:40,estilo:"yoda",tiempo:1000}); $("#example3").ProgressBarWars({porcentaje:90,estilo:"obi",tiempo:1800}); $("#example4").ProgressBarWars({porcentaje:5,estilo:"windu",tiempo:1900});

配置参数

你可以通过下面的格式来在初始化插件的时候传入一些配置参数：

$('#example4').ProgressBarWars({   option: value,   option2: value2 });

可用的配置参数有：

porcentaje：默认值：100，进度条的百分比值，从0-100。
tiempo：默认值为：1000，动画的速度，单位毫秒。
color：默认值：""，进度条的颜色。
estilo：默认值："yoda"，进度条的样式，可选值有："yoda", "vader","obi","windu"。
tamanio：默认值："30%"，进度条的宽度。值可以从0-100。
alto：默认值："6px"，进度条的高度。

来源：jQuery之家

正文到此结束

所属分类：编程技术

本文标签： web HTML 下载 CSS http UI src jquery example 配置参数插件 js value ip DOM
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

创意星球大战样式jQuery水平进度条插件

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流