冒泡
更多原生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';
}
}
}