UDN-企业互联网技术人气社区

板块导航

浏览  : 489
回复  : 2

[原生js] JavaScript实现点击按钮让DIV层弹性移动的方法

[复制链接]
牛娜的头像 楼主
发表于 2017-1-8 14:03:31 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了JavaScript实现点击按钮让DIV层弹性移动的方法,实例分析了JavaScript操作div层的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

  本文实例讲述了JavaScript实现点击按钮让DIV层弹性移动的方法。分享给大家供大家参考。具体实现方法如下:
  
  复制代码 代码如下:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <title>点击按钮让DIV层弹性移动特效</title>

  5. <style type="text/css">

  6. #div1{ background: #FFCC66; border:#FF6600 1px solid; height:100px; width:100px; position:relative; left:0px;}

  7. </style>

  8. <script type="text/JavaScript">

  9.  var t=null;

  10.  function startMove()

  11.  {

  12.   if(t)

  13.   {

  14.    clearInterval(t);

  15.   }

  16.   t=setInterval(move, 30);

  17.  }

  18.  var step=0;

  19.  function move()

  20.  {

  21.   var odiv=document.getElementById("div1");

  22.    step+=(100-odiv.offsetLeft)/50;

  23.    step=step*0.98

  24.   odiv.style.left=odiv.offsetLeft+step;

  25.  }

  26. </script>

  27. </head>

  28. <body>

  29. <div id="div1">

  30. </div>

  31. <input type="button" value="移动" onclick="startMove()"/>

  32. </body>

  33. </html>
复制代码
  
  希望本文所述对大家的JavaScript程序设计有所帮助。

相关帖子

发表于 2017-1-8 14:04:00 | 显示全部楼层
其实js如果遇到web安全类的项目,那就又要做牺牲了,无法读写文件,访问受限。。。哎。。。
使用道具 举报

回复

发表于 2017-1-10 14:42:02 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“唯吾┲逆天ぃ“
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部