mouseover
// onmouseenter onmouseleave
// onmouseover omouseout
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
.son {
width: 100px;
height: 100px;
background: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector(".father")
var son = document.querySelector(".son")
father.onmouseover = function() {
console.log("放到了father上面")
}
使用 onmouseover时，进入father盒子会触发一次，当进入father里面的子元素时，也会触发mouseover
// 进入father只会触发一次！！！，对father里面的子元素进出，不会触发mouseenter
father.onmouseenter = function() {
console.log("放到了father上面")
}
</script>
动画
例1:
<style>
.box {
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 1.获取box dom元素
// 2.增加left值
// 3.setInterval
// 4.400
// 5.clearInterval
var box = document.querySelector(".box")
var left = 0;
// 匀速运动！！！
var timer = setInterval(function() {
left += 10
if(left >= 400) {
clearInterval(timer)
}
box.style.left = left + "px"
}, 50)
</script>
封装成函数
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<script>
function animate(dom, target, time) {
dom.timer = setInterval(function() {
if(dom.offsetLeft >= target) {
// console.log(111)
clearInterval(dom.timer)
}
dom.style.left = dom.offsetLeft + 1 + "px"
}, time)
}
animate(document.querySelector(".div1"), 400, 40)
animate(document.querySelector(".div2"), 300, 30)
</script>
步长
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
</head>
<body>
<button id="btn1">移动box1</button>
<button id="btn2">移动box2</button>
<div class="box1"></div>
<div class="box2"></div>
<script>
// var box = document.querySelector(".box")
// 非匀速运动。先快后慢
// 缓慢动画的原理？
// function animate(obj, target) {
// var left = 0;
// var timer = setInterval(function() {
// left += 10
// if(left >= target) {
// clearInterval(timer)
// }
// obj.style.left = left + "px"
// }, 30)
// }
function animate(obj, target) {
clearInterval(obj.timer)
obj.timer = setInterval(function(){
//步长刚开始很大，后来慢慢变小！！！
// (target - obj.offsetLeft) / 10
// (target - obj.offsetLeft）/10
// left = obj.offsetLeft + (target - obj.offsetLeft) / 10;
// offsetLeft = 0 500 / 10 = 50
// offsetLeft = 50 (500 - 50)/10 = 45
// offsetLeft = 95 (500 - 95)/10 = 40.5
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step): Math.floor(step)
if(obj.offsetLeft == target) {
clearInterval(obj.timer)
}
obj.style.left = obj.offsetLeft + step + "px"
}, 30)
}
var btn1 = document.querySelector("#btn1")
var btn2 = document.querySelector("#btn2")
var box1 = document.querySelector(".box1")
var box2 = document.querySelector(".box2")
btn1.onclick = function() {
animate(box1, 600)
}
btn2.onclick = function() {
animate(box2, 500)
}
</script>
回调函数
<!-- <script>-->
<!-- 回调函数，回头再调用的函数-->
// fn想当于function() {
// console.log("这个函数是一个回调函数， 2s后进行回调")
// }
<!-- function demo(fn) {-->
<!-- setTimeout(function() {-->
<!-- fn()-->
<!-- }, 2000)-->
<!-- }-->
<!-- demo(function() {-->
<!-- console.log("这个函数是一个回调函数， 2s后进行回调")-->
<!-- })-->
<!--</script>-->
