JS多物体宽度运动案例

任务

对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px。

任务提示:

(1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器,避免多定时器干扰。

(2)每个物体都要有单独的定时器,避免公用定时器导致相互掣肘。

JS多物体宽度变化小案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
  <meta charset="UTF-8">
  <title>JS小案例:多物体变宽</title>
  <style>
    body {
      height: 2000px;
      margin: 0px;
    }
 
    div {
      width: 100px;
      height: 50px;
      background: red;
      margin: 10px;
    }
  </style>
  <script>
//补充代码
  </script>
</head>
 
<body>
  <div></div>
  <div></div>
  <div></div>
</body>
 
</html>

  参考代码

  

posted @   请叫我二狗哥  阅读(139)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示