图片在界面的移动

在制作网页中会有许多的动态效果，这里就列举一个图片在界面不停的左右移动的动态效果代码：根据这代码我们可以实现许多的不同效果。

  <!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  body{
  margin: 0;
  }
  #div1{
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  /*left: 100px;*/
  }
  </style>
  </head>
  <body>
  <button onclick="mymove()">移动</button>
  <button onclick="getjiemian()">界面</button>
  <hr/>
  <div id="div1"></div>
  <script>
  function getjiemian(){
  alert(document.body.offsetWidth);
  }
  var num = 2;
  function mymove(){
  var div1 = document.getElementById('div1');
  // alert(div1.offsetLeft+',,'+div1.offsetTop);
   
  // 元素的style属性无法获取style标记中设置的值,而仅仅只能读取style属性的值
  div1.style.left = div1.offsetLeft + num + 'px';
   
  if(div1.offsetLeft+div1.offsetWidth>=document.body.offsetWidth
  || div1.offsetLeft<=0)
  num = -num;
   
   
  window.setTimeout(mymove, 20);
  }
  </script>
  </body>
  </html>

posted on 2017-03-17 13:19  小小的西红柿  阅读(122)  评论(0)    收藏  举报

导航