Div层弹性左右移动特效，JS实现，代码简洁

　　代码超少的Div弹性运动特效，点击按钮后，Div层来回做运动，像有弹性一样在缓冲，动感十足的样子。

　　关于类似的例子，烈火学院以前给大家介绍了几个，我们可以来回顾一下。

　　一。JS编写透明度渐变、位置移动等多个函数

　　二。js+css 完成一个漂亮的、富有弹性的导航菜单

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>div移动</title><br /> <style type="text/css"><br /> #div1{ background: #FFCC66; border:#FF6600 1px solid; height:100px; width:100px; position:relative; left:0px;}<br /> </style><br /> <script type="text/javascript"><br /> var t=null;<br /> function startMove()<br /> {<br /> if(t)<br /> {<br /> clearInterval(t);<br /> }<br /> t=setInterval(move, 30);<br /> }<br /> var step=0;<br /> function move()<br /> {<br /> var odiv=document.getElementById("div1");<br /> step+=(100-odiv.offsetLeft)/50;<br /> step=step*0.98<br /> odiv.style.left=odiv.offsetLeft+step;<br /> }<br /> </script><br /> </head><br /> <body><br /> <div id="div1"><br /> </div><br /> <input type="button" value="移动" onclick="startMove()"/><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

Div层弹性左右移动特效，JS实现，代码简洁

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

Div层弹性左右移动特效，JS实现，代码简洁

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性