基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效。这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码。效果图如下:
实现的代码。
html代码:
<div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <p> <button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button> <button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button> <button class="btn btn-primary ladda-button" data-style="expand-up"><span class="ladda-label">expand-up</span></button> <button class="btn btn-primary ladda-button" data-style="expand-down"><span class="ladda-label">expand-down</span></button> </p> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <p> <button class="btn btn-info ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button> <button class="btn btn-info ladda-button" data-style="zoom-out"><span class="ladda-label">zoom-out</span></button> </p> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <p> <button class="btn btn-warning ladda-button" data-style="slide-left"><span class="ladda-label">slide-left</span></button> <button class="btn btn-warning ladda-button" data-style="slide-right"><span class="ladda-label">slide-right</span></button> <button class="btn btn-warning ladda-button" data-style="slide-up"><span class="ladda-label">slide-up</span></button> <button class="btn btn-warning ladda-button" data-style="slide-down"><span class="ladda-label">slide-down</span></button> </p> <p><button class="btn btn-warning ladda-button" data-style="contract"><span class="ladda-label">contract</span></button></p> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center progress-demo"> <p>Built-in progress bar</p> <p> <button class="btn btn-danger ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button> <button class="btn btn-danger ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button> <button class="btn btn-danger ladda-button" data-style="contract"><span class="ladda-label">contract</span></button> </p> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <p>Sizes</p> <p> <button class="btn btn-primary btn-xs ladda-button" data-style="expand-right" data-size="xs"><span class="ladda-label">extra small</span></button> <button class="btn btn-primary btn-sm ladda-button" data-style="expand-right" data-size="s"><span class="ladda-label">small</span></button> <button class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">large</span></button> </p> </div> </div> </div>
js代码:
// Bind normal buttons Ladda.bind('div:not(.progress-demo) button', { timeout: 2000 }); // Bind progress buttons and simulate loading progress Ladda.bind('.progress-demo button', { callback: function (instance) { var progress = 0; var interval = setInterval(function () { progress = Math.min(progress + Math.random() * 0.1, 1); instance.setProgress(progress); if (progress === 1) { instance.stop(); clearInterval(interval); } }, 200); } });
基于jQuery点击加载动画按钮特效的更多相关文章
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
- jQuery实现无限加载瀑布流特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
- Jquery点击加载更多
一.点击加载更多有点像分页获取数据类似,下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- jquery 点击加载更多
html部分 <ul class="bill moreadd"> <div class="total"><span>-< ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- tableView中的“点击加载更多”点击不到
假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...
- jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...
随机推荐
- atitit.修复xp 操作系统--重装系统--保留原来文件不丢失
atitit.修复xp 操作系统--重装系统--保留原来文件不丢失 1. 修复目标...保持c盘文件,恢复system文件走ok... 1 2. 重装系统以前的操作 1 2.1. 避免格式化c盘/gh ...
- Leetcode 118 Pascal's Triangle 数论递推
杨辉三角,即组合数 递推 class Solution { vector<vector<int>> v; public: Solution() { ; i < ; ++i ...
- es6学习笔记5--promise
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise是一个对象,从它可以获取异步操作的消息.Promise提供统一的API, ...
- Mac 安装 home Brew以及 XCTool的过程记录
一.HomeBrew相关: 先对HomeBrew做一个简单的介绍吧,之前了解的也不多. 主要就是用于安装Unix的工具包. 注意:HomeBrew依赖于Xcode的 Command Line Tool ...
- 谈一谈PHP的代码重构
随着 PHP 从一种简单的脚本语言转变为一种成熟的编程语言,一个典型的 PHP 应用程序的代码库的复杂性也随之增大.为了控制对这些应用程序的支持和维护,我们可以使用各种测试工具来自动化该流程.其中一种 ...
- Python:如何显示进度条
首先,推荐一个组件:progressive 效果如下: 进度条和一般的print区别在哪里呢? 答案就是print会输出一个\n,也就是换行符,这样光标移动到了下一行行首,接着输出,之前已经通过std ...
- Installing Oracle and ArcSDE on separate servers
http://help.arcgis.com/en/arcgisdesktop/10.0/help/index.html#//002n0000000q000000
- css强制换行和超出隐藏实现
一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...
- mahout分类学习和遇到的问题总结
这段时间学习Mahout有喜有悲.在这里首先感谢樊哲老师的指导.以下列出关于这次Mahout分类的学习和遇到的问题,还请大家多多提出建议:(全部文件操作都使用是在hdfs上边进行的). (本人用的环境 ...
- 用C#通过反射实现动态调用WebService 告别Web引用
我们都知道,调用WebService可以在工程中对WebService地址进行WEB引用,但是这确实很不方便.我想能够利用配置文件灵活调用WebService.如何实现呢? 用C#通过反射实现动态调用 ...