利用JavaScript事件冒泡制作特效

最新推荐文章于 2023-05-06 14:24:39 发布

置顶 aguang5241

最新推荐文章于 2023-05-06 14:24:39 发布

阅读量315

点赞数

分类专栏：技术项目文章标签： JavaScript 冒泡

本文链接：https://blog.csdn.net/aguang5241/article/details/102709584

版权

技术项目专栏收录该内容

11 篇文章 0 订阅

订阅专栏

冒泡

更多原生js小项目，参见本人GitHub—Aguang5241

利用js冒泡特性：

实现图像经鼠标点击后外围传播的动画效果
注.IE浏览器会由外向内进行传播

效果展示

未点击
点击外围
点击中心

源代码

html

<!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">
  <link rel="stylesheet" href="css/bubble.css">
  <script src="js/bubble.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="box outer">
    <div class="box">
      <div class="box">
        <div class="box">
          <div class="box">
            <div class="box">
              <div class="box">
                <div class="box">
                  <div class="box">
                    <div class="box">
                      <div class="box">
                        <div class="box">
                          <div class="box">
                            <div class="box">
                              <div class="box">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

css

* {
  margin: 0;
  padding: 0;
}
body {
  text-align: center;
}
.box {
  position: relative;
  margin: 0 auto;
  border: 1px solid #333;
  background-color: #399c30;
  box-shadow: 1px 1px 10px #333;
}
.outer {
  border: 1px solid #fff;
  background-color: #eee;
}

javascript

window.onload = function() {
  var boxes = this.document.querySelectorAll('.box');
  var windowH = this.document.documentElement.clientHeight - 10;

  boxes[0].style.width = windowH + 'px';
  boxes[0].style.height = windowH + 'px';

  for (var i = 1; i < boxes.length; i++) {
    var w = windowH - i * 44;
    var h = windowH - i * 44;
    boxes[i].style.width = h + 'px';
    boxes[i].style.height = h + 'px';
    boxes[i].style.top = '22px';
    boxes[i].style.borderRadius = '10000px';
    boxes[boxes.length - i].style.transition = i/2 + 's';
    change(boxes[i]);
  };
  
  function change(obj) {
    obj.onclick = function() {
      obj.style.backgroundColor = '#007abc';
      obj.style.boxShadow = '10px 10px 10px #333';
    }
  }
}

aguang5241

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用JavaScript事件冒泡制作特效

冒泡更多原生js小项目，参见本人GitHub—Aguang5241利用js冒泡特性：实现图像经鼠标点击后外围传播的动画效果注.IE浏览器会由外向内进行传播效果展示未点击点击外围点击中心源代码html<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫

专栏目录