发表于： 2023-01-05 21:25:42
0 354
今天学习的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mouseover和mouseenter</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: red;
margin: 100px auto;
}
.son {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// mouseover 鼠标经过自身盒子会触发 经过子盒子还会触发
// father.addEventListener('mouseover',function () {
// console.log(11);
// })
// mouseenter 只会经过自身盒子触发
father.addEventListener('mouseenter',function () {
console.log(11);
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画原理</title>
<style>
div {
position: absolute;
left: 0;
width: 200px;
height: 200px;
background-color: skyblue;
}
span {
display: block;
position: absolute;
left: 0;
top: 250px;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<button class="btn500">点击500</button>
<button class="btn800">点击800</button>
<div></div>
<span>span盒子</span>
<script>
//动画原理
//简单动画函数封装 obj 目标对象 target 目标位置
// 给不同的元素 指定了不同的定时器
function animate(obj,target,caliback){
//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval( function () {
//步长值写到定时器的里面 不要出现小数 将数值取整
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
// 将数值取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//停止动画 停止定时器
clearInterval(obj.timer);
//回调函数写到定时器里面
if(caliback){
//调用函数
caliback();
}
}else {
//把每次加1 这个步长值改为一个慢慢变小的值 步长公式 (目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step +'px';
}
},15)
}
//注意 元素需要添加定位 才能使用 element.style.left
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
// var timer = setInterval( function () {
// if (div.offsetLeft >= 400) {
// //停止动画 停止定时器
// clearInterval(timer);
// }
// div.style.left = div.offsetLeft + 1 +'px';
// },30);
//调用函数
animate(div,300);
btn500.addEventListener('click',function () {
animate(span,500);
})
btn800.addEventListener('click',function () {
animate(span,800, function (){
//回调函数
span.style.backgroundColor = 'red';
});
})
//匀速动画 就是 盒子是当前的位置 + 固定的值 10
//缓动动画就是 盒子当前的位置 + 变化的值 (目标值 - 现在的位置) / 10
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画函数的使用</title>
<style>
* {
margin: 0;
padding: 0;
}
.sliderbar {
position: relative;
float: right;
margin-top: 100px;
width: 40px;
height: 40px;
background-color: red;
text-align: center;
line-height: 40px;
}
.con {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 40px;
background-color: skyblue;
z-index: -1;
}
</style>
<script src="js文件存放/animate.js"></script>
</head>
<body>
<div class="sliderbar">
<span>←</span>
<div class="con">问题反馈</div>
</div>
<script>
//1、获取元素
var sliderbar = document.querySelector('.sliderbar');
var con = document.querySelector('.con');
var span = document.querySelector('span');
//当我们鼠标经过 sliderbar 就会让 con这个盒子滑动到左侧
//当我们鼠标经过 sliderbar 就会让 con这个盒子滑动到右侧
sliderbar.addEventListener('mouseenter', function () {
animate(con,-160, function (){
span.innerHTML = '→';
})
})
sliderbar.addEventListener('mouseleave', function () {
animate(con,0, function () {
span.innerHTML = '←';
})
})
</script>
</body>
</html>
animate.js
//动画原理
//简单动画函数封装 obj 目标对象 target 目标位置
// 给不同的元素 指定了不同的定时器
function animate(obj,target,caliback){
//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval( function () {
//步长值写到定时器的里面 不要出现小数 将数值取整
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
// 将数值取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//停止动画 停止定时器
clearInterval(obj.timer);
//回调函数写到定时器里面
if(caliback){
//调用函数
caliback();
}
}else {
//把每次加1 这个步长值改为一个慢慢变小的值 步长公式 (目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step +'px';
}
},15)
}
返回列表
评论