1.天使随着鼠标移动而移动
<style>
img {
position: absolute;
}
</style>
</head>
<body>
<!-- 天使随鼠标移动而移动 -->
<img src="images/tianshi.gif" alt="">
<script>
var img = document.querySelector('img');
document.addEventListener('mousemove', function() {
img.style.top = event.clientY - img.height / 2 + 'px';
img.style.left = event.clientX - img.width / 2 + 'px';
})
</script>
</body>
2.移动产生柳絮动画:
<style>
div {
display: none;
position: absolute;
width: 20px;
height: 20px;
background-color: yellow;
}
</style>
</head>
<body style="background-color: black;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var div = document.querySelectorAll('div');
console.log(div.length); //11
var num = 0;
setInterval(function() {
if (num >= div.length) {
num = 0
} else {
document.addEventListener('mousemove', function() {
div[num].style.top = event.clientY - div[num].clientHeight + 'px';
div[num].style.left = event.clientX - div[num].clientWidth + 'px';
div[num].style.display = 'block'
})
num++;
}
}, 30)
</script>
</body>
3.拖拉盒子动画:
<style>
.big {
position: relative;
width: 800px;
height: 800px;
background-color: violet;
border: 1px solid red;
}
.small {
position: absolute;
width: 40px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
<script>
var big = document.querySelector('.big');
var small = document.querySelector('.small');
small.addEventListener('mousedown', function() {
document.onmousemove = function() {
small.style.top = event.clientY - small.clientHeight / 2 + 'px';
small.style.left = event.clientX - small.clientWidth / 2 + 'px';
//控制中间的小盒子不溢出大盒子
//限制小盒子的左右
if (event.clientX >= big.clientWidth - small.clientWidth / 2) {
small.style.left = big.clientWidth - small.clientWidth + 'px'
} else if (event.clientX < small.clientWidth / 2) {
small.style.left = 0
}
//限制小盒子的上下
if (event.clientY >= big.clientHeight - small.clientHeight / 2) {
small.style.top = big.clientHeight - small.clientHeight + 'px';
} else if (event.clientY < small.clientHeight / 2) {
small.style.top = 0
}
console.log(big.clientWidth);
}
})
//鼠标抬起时,将文档的鼠标移动的属性值(函数)设置成空
document.addEventListener('mouseup', function() {
document.onmousemove = null;
})
</script>
</body>
4.tab切换动画
<style>
.top,
.bottom {
margin: auto;
font-size: 20px;
text-align: center;
}
.top {
width: 610px;
height: 50px;
margin-bottom: 100px;
line-height: 50px;
}
.topContent {
float: left;
width: 200px;
height: 50px;
border: 1px solid red;
}
.bottom {
width: 610px;
height: 200px;
line-height: 200px;
}
.bottomContent {
display: none;
width: 610px;
height: 200px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="top">
<div class="topContent">1</div>
<div class="topContent">2</div>
<div class="topContent">3</div>
</div>
<div class="bottom">
<div class="bottomContent">1</div>
<div class="bottomContent">2</div>
<div class="bottomContent">3</div>
</div>
<script>
var tc = document.querySelectorAll('.topContent');
var bc = document.querySelectorAll('.bottomContent');
for (let i = 0; i < tc.length; i++) {
tc[i].onclick = function() {
for (var j = 0; j < tc.length; j++) {
bc[j].style.display = 'none'
tc[j].style.backgroundColor = ''
}
bc[i].style.display = 'block';
this.style.backgroundColor = 'red'
}
}
</script>
</body>
5.js样式计算属性:
可以获取当前元素所有最终使用的CSS属性值,返回的是一个CSS样式声明对象,语法,【object CSSStyleDeclaration】是一个只读属性
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
div:after {
content: '';
width: 20px;
height: 20px;
background-color: crimson;
}
</style>
</head>
<body>
<div>
</div>
<script>
var div = document.querySelector('div');
console.log(window.getComputedStyle(div));
console.log(window.getComputedStyle(div, ':after').width); //20px
console.log(window.getComputedStyle(div).backgroundColor); //驼峰命名法
console.log(div.style.getPropertyValue('background-color')); //不需要驼峰命名法
</script>
</body>