手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

jQuery图片加载loading加载层动画插件

时间:2020-06-25    点击: 次    来源:网络    作者:佚名 - 小 + 大

jQuery图片加载loading加载层动画插件
简要教程

ProgressBar.js是一款jQuery图片加载loading加载层动画插件。该插件在图片加载时,为图片添加垂直的图片逐渐显示效果,非常炫酷。

ProgressBar.js效果图-1

ProgressBar.js效果图-2

使用方法

在HTML文件中引入。

<link rel="stylesheet" type="text/css" href="../src/progressbar.css"><script type="text/javascript" src="../src/jquery.min.js"></script>     <script type="text/javascript" src="../src/jquery.progressbar.js"></script>                     
HTML结构
<div id="container"></div>                
javascript

普通垂直加载图片效果:

var myProgress = $("#example").progressBar({    imageUrl: 'image.png',    imageHeight: 300,    imageWidth: 250});                

使用背景图片:

var myProgress = $("#example").progressBar({    imageUrl: 'image.png',    imageHeight: 300,    imageWidth: 250,    backgroundImageUrl: 'bg.png',    backgroundOpacity: 1});                          

 ProgressBar.js插件的github网址为:https://github.com/kelvinperrie/ProgressBar

 jQuery图片加载loading加载层动画插件 本地下载

上一篇:基于Bootstrap4的material design风格表单插件

下一篇:js堆叠卡片轮播图插件stackedCards

推荐阅读
浙ICP备14024822号  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  电话:13388629007  |  
Copyright © 2020 天人文章管理系统 版权所有,授权www.antqq.com使用 Powered by 55TR.COM