JavaScript运动

最新推荐文章于 2021-01-26 17:37:50 发布

SFwords

最新推荐文章于 2021-01-26 17:37:50 发布

阅读量243

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/SFwords/article/details/79391914

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html> 
 
 
  <html 
  lang= 
  "en" 
  > 
 

 
  <head> 
 
 
  <meta 
  charset= 
  "UTF-8" 
  > 
 
 
  <meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  <meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  <title>Document 
  </title> 
 
 
  <style> 
 
 
  div { 
 
 
  margin: 
  10 
  px; 
 
 
  width: 
  100 
  px; 
 
 
  height: 
  20 
  px; 
 
 
  background-color: 
  rgb 
  ( 
  62 
  , 
   118 
  , 
   202 
  ); 
 

   } 
 
 
  < 
  /style> 
 
 
  <script> 
 
 
  window 
  . 
  onload 
  = 
  function 
  () 
  { 
 
 
  var 
  oDiv 
  = 
  document 
  . 
  getElementsByTagName 
  ( 
  'div' 
  ); 
 
 
  for 
  ( 
  var 
  i 
  = 
  0 
  ; 
  i 
  < 
  oDiv 
  . 
  length 
  ; 
  i 
  ++) 
  { 
 
 
  oDiv 
  [ 
  i 
  ]. 
  timer 
  = 
  null 
  ; 
 
 
  oDiv 
  [ 
  i 
  ]. 
  onmouseover 
  = 
  function 
  () 
  { 
 
 
  startMove 
  ( 
  this 
  , 
  400 
  ) 
 
 
  } 
 
 
  oDiv 
  [ 
  i 
  ]. 
  onmouseout 
  = 
  function 
  () 
  { 
 
 
  startMove 
  ( 
  this 
  , 
  100 
  ) 
 
 
  } 
 
 
  } 
 
 
  } 
 

 
  function 
  startMove 
  ( 
  obj, 
  iTarget 
  ) 
  { 
 
 
  console 
  . 
  log 
  ( 
  obj 
  . 
  offsetTop 
  ); 
 
 
 
 
  clearInterval 
  ( 
  obj 
  . 
  timer 
  ) 
 
 
  obj 
  . 
  timer 
  = 
  setInterval 
  ( 
  function 
  () 
  { 
 
 
  var 
  speed 
  = 
  ( 
  iTarget 
  - 
  obj 
  . 
  offsetWidth 
  ) 
  / 
  6 
  ; 
 
 
  if 
  ( 
  obj 
  . 
  offsetWidth 
  == 
  iTarget 
  ) 
  { 
 
 
  clearInterval 
  ( 
  obj 
  . 
  timer 
  ); 
 
 
  } 
  else 
  { 
 
 
  obj 
  . 
  style 
  . 
  width 
  = 
  obj 
  . 
  offsetWidth 
  + 
  speed 
  + 
  'px' 
  ; 
 
 
  } 
 
 
  }, 
  30 
  ) 
 
 
  } 
 
 
  < 
  /script> 
 
 
  </head> 
 

 
  <body> 
 
 
  <div></div> 
 
 
  <div></div> 
 
 
  <div></div> 
 
 
  </body> 
 

 
  </html> 
 