CSS3,JS可用于刷新按钮或者加载动画的动画

html:
<input type="button" id="zidong3" style="top: 12px;" />
css:
#zidong3
{
position: absolute;
top: 7px;
right: 7px;
width: 24px;
height: 24px;
border: none;
background: #fff url(../images/refresh.png) no-repeat;
background-size: 100% 100%;
/*background-position: -1px 5px;*/
border-radius: 50%;
}
/*重点:*/
@-webkit-keyframes gira {
from{-webkit-transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg);}
}
@keyframes gira {
from{-webkit-transform: rotate(0deg); transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg); transform: rotate(360deg)}
}
JS:
$("#zidong3").click(function () {
$(this).css("-webkit-animation", "gira 1s ease-out 1");
$(this).css("-ms-animation", "gira 1s ease-out 1");
$(this).css("animation", "gira 1s ease-out 1");
var z = $(this);
setTimeout(function () {
$(z).css("animation", "");
}, 1000);
//getGPS();//获取位置
});
有时间说明
CSS3,JS可用于刷新按钮或者加载动画的动画的更多相关文章
- iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法
pjax可以实现ajax的局部刷新功能,同时能改变地址栏的URL,因此支持浏览器的后退和前进功能. 但是,在使用中,若没有正确使用,仍然会出现一些问题. 比如,我们在使用pjax后,能够在不加载整个页 ...
- react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)
1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...
- react-native ListView 封装 实现 下拉刷新/上拉加载更多
1.PageListView 组件封装 src/components/PageListView/index.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Com ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- js 前端实现下拉刷新 上拉加载
效果 css html,body{ height:100%; // 其他界面未设置html 无法监听scroll } /* 下拉刷新 */ .refresh-loading { transition: ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- H5下拉刷新和上拉加载实现原理浅析
前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...
随机推荐
- Sedgewick的红黑树
红黑树一直是数据结构中的难点,大部分关于算法与数据结构的学习资料(包括<算法导论>)对于这部分的讲解都是上来就下定义,告诉我们红黑树这个性质那个性质,插入删除要注意1234点,但是基本没有 ...
- win7下IIS错误:"无法访问请求的页面,因为该页的相关配置数据无效"的解决方法(转)
今天新装win7,然后在IIS下布署了一个网站,布署完成后运行,提示如下错误:HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效 ...
- WinForm中使用XML文件存储用户配置及操作本地Config配置文件
大家都开发winform程序时候会大量用到配置App.config作为保持用户设置的基本信息,比如记住用户名,这样的弊端就是每个人一些个性化的设置每次更新程序的时候会被覆盖. 故将配置文件分两大类: ...
- LeetCode "Binary Tree Level Order Traversal II" using DFS
BFS solution is intuitive - here I will show a DFS based solution: /** * Definition for a binary tre ...
- 对ASP.NET运行机制之 一般处理程序ashx的学习
一般处理程序(HttpHandler)是·NET众多web组件的一种,ashx是其扩展名.其中一个httpHandler接受并处理一个http请求,类比于Java中的servlet.类比于在Java中 ...
- ThinkPHP + Discuz 整合方法
ThinkPHP + Discuz 整合方法以下是Discuz6的整合方法,discuz5请按照里面的说明进行相应的修改,也可以使用了. 1.在项目的action目录下信件PublicAction.c ...
- typedef struct 结构体
typedef struct _TTTT_ { int i; }TT_TT; 定义变量如下: struct _TTTT_ NewTT;方法1 TT_TT NewTT;方法2 是声明和定义 ...
- PHP中去除字符串中的换行的方法
在PHP中,有时候我们需要对字符串的换行进行过滤,比如天涯PHP博客中文章页面的description信息,我是直接截取的文章内容,并过滤掉html符号,最终还要过滤掉其中的换行.下面整理一下常见的去 ...
- ThinkPHP 3.2.3集成uploadify上传控件
uploadify控件有一个坑爹的问题,就是文件上传时会session丢失,官方解释http://www.uploadify.com/documentation/uploadify/using-ses ...
- C#中定义数组
C#定义数组 一.一维:int[] numbers = new int[]{1,2,3,4,5,6}; //不定长 int[] numbers = new int[3]{1,2,3};//定长 二 ...