Js 页面元素 简单震动效果
http://jsfiddle.net/dtdxrk/P9gea/embedded/result/
看见类似的效果 自己动手写一个
就是padding + setTimeout让元素动起来 其实margin也行 调用的时候要注意元素的原始padding设置
1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Js 页面元素 简单震动效果</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 #box{ border:1px solid #000;width: 300px; height: 200px; cursor: pointer;margin: 200px auto;} 9 </style> 10 </head> 11 <body> 12 13 <div id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129"><br>点我试试</div> 14 15 <script type="text/javascript"> 16 17 document.getElementById("box").onclick = Shake; 18 19 function Shake(){ 20 var i = 20, 21 that = this; 22 23 var Timer = setTimeout(active,15); 24 25 function active(){ 26 if(i>=0){ 27 that.style.padding = 0; 28 i%2 == 0 ? that.style.paddingLeft = i + "px" : that.style.paddingRight = i + "px"; 29 i--; 30 Timer = setTimeout(active,15); 31 }else{ 32 clearTimeout(Timer); 33 }; 34 }; 35 36 } 37 38 </script> 39 </body> 40 </html>
分类:
js demo
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！