欢迎提供更好的方法!

<!--http://www.cnblogs.com/webzhangnan/p/3244920.html -->
<html>
<head>
<title>IOS shake by conan</title>
<style type="text/css">
.box{
display: -webkit-box;
padding: 20px;
}
.icon{
height: 100px;
width: 100px;
margin: 20px;
background: red;
}
#start{
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
margin: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="box">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
<div id="start">run shake</div>
<script type="text/javascript">
shake = function($item) {
if ($item.length) {
var timeIdAry = [] , len = $item.length;
while(len--) timeIdAry.push(shake($item[len]));
return function() {
var stop;
while (stop = timeIdAry.shift()) {
stop();
}
}
} else {
var timeId, runing = true,
duration = '-webkit-transition: -webkit-transform 100ms;',
d = false;
var loop = function() {
if (!runing) return;
if(!$item.getAttribute('pause'))
$item.style.cssText = duration + '-webkit-transform: translate3d(' + (d ? 0 : 0) + 'px,' + (d ? 0 : 0) + 'px, 0) rotate(' + (d ? -1 : 1) + 'deg);-webkit-transform-origin: '+(d ? 20 : 80) + '% ' + (d ? 80 : 20) + '%'
d = !d;
timeId = setTimeout(loop, 100);
}
loop();
return function() {
clearTimeout(timeId);
$item.setAttribute('style', '');
delete $item;
loop = null;
itemId = runing = null;
}
}
}
var icons = document.querySelectorAll('.icon');
var stop;
document.querySelector('#start').addEventListener('click', function(){
if(stop) stop(),stop=null,this.innerHTML = 'run shake';
else stop = shake(icons), this.innerHTML = 'kill shake';
}); var s = icons.length , EV = 'ontouchstart' in window ? {start : 'touchstart',end:'touchend'} : {start : 'mouseover',end:'mouseout'};
while(s--){
icons[s].addEventListener(EV.start, function(e){
e.target.setAttribute('pause', 1);
e.target.setAttribute('style', '-webkit-transform: scale(1.5);-webkit-transition: -webkit-transform 100ms;opacity:.5');
});
icons[s].addEventListener(EV.end, function(e){
e.target.setAttribute('pause', '');
});
}
</script> </body>
</html>

js实现IOS上删除app时颤抖动画j函数的更多相关文章

  1. 上传App时遇IDFA错误问题

    今天上传App时遇到下图1的情况,很纳闷,又是苹果新规. 通常是第三方的库引起啦,马上想到百度统计了,打开SDK下载页面看看简单介绍,里面有讲到这个问题了. 图2就是这次改动的原因. 更新SDK,之前 ...

  2. iOS 上传APP到AppStore 卡在 Authenticating with the iTunes store 提示

    上传APP的时候,遇到了问题,一直卡在Authenticating with the iTunes store提示这里, 解决办法:在Application Loader里面登录需要上传APP的开发者 ...

  3. app混合开发 fastlick.js 在ios上 input标签点击 不灵敏 处理

    ios11 上有这个问题 而老版本的ios没有 会出现这个的原因是使用fastclick.js点击后input没有获取焦点,所以只需要在fasyclick的源码的这个位置 可以直接在源码内搜索关键字找 ...

  4. iOS: 上传App到AppStore,由于Xcode上传太慢,换成Application Loader上传,速度秒传

    一.遇到的遭遇 在之前的项目开发中,本人有点固执,一直采用xcode打包后再上传,结果可想而知: (1)要么上传时速度慢的跟蜗牛似的,等的我心力交瘁(不排除网络不给力的原因,公司这个吊问题快把我气疯了 ...

  5. iOS上传App Store报错:this action cannot be completed -22421 解决方案

    最近swift项目升了xcode8,提交版本时,遇到这个: this action cannot be completed -22421 瞬间懵逼,连具体报错原因都没有,只有一个代码 22421,找了 ...

  6. 50.IOS上传APP问题

    更新版本的时候遇到几个问题 1.ERROR ITMS-90535: "Unexpected CFBundleExecutable Key. The bundle at 'Payload/di ...

  7. iOS 上传App Store提示WARNING ITMS-90703错误的说明

    今天上传app到appstore的时候,上传到最后一步的时候,报了一个警告: 原文如下: WARNING ITMS-90703: "Deprecated Xcode Build. Due t ...

  8. iOS 后台退出app时不执行applicationWillTerminate的临时解决方法

    - (void)applicationDidEnterBackground:(UIApplication *)application { // Use this method to release s ...

  9. JS判断语句 注意多句时加大括号 回调函数LODOP兼顾写法

    由于C-LODOP获取一些动作函数的返回值,需要用回调函数,由于常见的使用方法是混合部署,也就是同一个页面,根据浏览器的不同,可能会走LODOP ,也可能会走C-LODOP,因此写法要坚固两种,而有些 ...

随机推荐

  1. 对SpringMVC框架的理解(转)

    SpringMVC概念:     他是一个轻量级的开源框架,应用于表现层,基于MVC的设计模式. SpringMVC的特点:     1.他是单例的可以设置成多例.     2.他的线程是安全的    ...

  2. jz2440烧写方法笔记

    1,jz2440用dnw烧写普通程序的步骤是: ①选择将uboot烧写到nor flash或者是nand flash中 ②打开dnw,选择要烧写的程序,注意不是uboot,是你要烧写的程序,他将所有的 ...

  3. xtu summer individual 5 E - Burning Bridges

    Burning Bridges Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Origina ...

  4. 在ubuntu 18.04下装有线守护wg

    wg你懂的是什么,下面讲讲我这段时间安装过程,发觉这个软件和CENTOS 7下面不是很合拍,它更适合ubuntu,因为ubuntu仍然用iptables,而CENTOS 早就用了firewalld了, ...

  5. [luoguP1037] 产生数(floyd + 高精度)

    传送门 先用 floyd 求出每一个数可以变成那些数. 然后利用乘法原理求解,需要高精度. 代码 #include <cstdio> #include <cstring> #i ...

  6. [K/3Cloud] 创建一个操作校验器

    概念: 定义了一个校验器对象,通常是添加到业务单据操作服务插件,用于对操作的合法性进行校验.继承自校验器抽象对象AbstractValidator. 示例: 新建一个类,继承自AbstractVali ...

  7. 【ZJOI2018 Round2游记】

    在主场作为高三退役选手要去听一些奇怪的宣讲 看看有没有PY的机会 语文考试考到一半溜出来 ZJU先上 开始挑衅 很勇啊 THU的校友 然而这些都离我太过遥远 最后PY了一波 获得了鼓励(并不) 最后的 ...

  8. Linux下汇编语言学习笔记17 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  9. HDU 5640 King's Cake【模拟】

    题意: 给定长方形,每次从中切去一个最大的正方形,问最终可以得到多少正方形. 分析: 过程类似求gcd,每次减去最小的边即可. 代码: #include <cstdio> #include ...

  10. 恢复表数据的办法(delete删除可恢复,truncate不可恢复)

    select * from table_name as of timestamp to_timestamp('2018-12-20 00:00:00', 'yyyy-mm-dd hh24:mi:ss' ...