700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > b站pink老师JavaScript的PC端网页特效 案例代码——引用animate.js案例

b站pink老师JavaScript的PC端网页特效 案例代码——引用animate.js案例

时间:2022-05-06 13:42:42

相关推荐

b站pink老师JavaScript的PC端网页特效 案例代码——引用animate.js案例

目标效果:

1.当鼠标进入(鼠标进入被选元素的时候mouseenter不会冒泡)sliderbar小盒子(宽40px,高40px,里面有个span内容为⬅)的时候,con小盒子(宽200px,高40px)向左移动160px(con小盒子的宽200px-sliderbar小盒子的宽40px),当con小盒子移动完毕后,span中的⬅变为➡

初始状态 :

当鼠标进入(鼠标进入被选元素的时候mouseenter不会冒泡)sliderbar小盒子之后:

2.当鼠标离开(鼠标离开被选元素的时候mouseleave不会冒泡)sliderbar小盒子(宽40px,高40px)的时候,con小盒子(宽200px,高40px)恢复初始状态,当con小盒子恢复初始状态后,span中的➡变为⬅

animate.js中

function animate(obj, target, callback) {//先清除之前的定时器,只保留当前的一个定时器clearInterval(obj.timer);obj.timer = setInterval(function () {// 1.步长值写在定时器里面 步长值=(目标值-现在的位置)/10var step = Math.ceil(target - obj.offsetLeft) / 10;//判断步长的正负// 如果步长为正,往大里取整 Math.ceil// 如果步长为负,往小里取整 Math.floorstep = step > 0 ? Math.ceil(step) : Math.floor(step);// 2.当盒子位置=目标位置,停止定时器if (obj.offsetLeft == target) {//用停止定时器的方式 停止动画clearInterval(obj.timer);// 如果有回调函数,调用回调函数if (callback) {callback();}}// 3.把之前每次加1,改为一个慢慢变小的步长值 步长值=(目标值-现在的位置)/10obj.style.left = obj.offsetLeft + step + 'px';//记得加单位}, 15)}

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">

<title>Document</title>

<style>

.sliderbar {

position: fixed;

right: 0;

/*设置动画一定要有定位*/

bottom: 100px;

width: 40px;

height: 40px;

text-align: center;

line-height: 40px;

cursor: pointer;

color: #fff;

}

.con {

position: absolute;

left: 0;

top: 0;

/*设置动画一定要有定位*/

width: 200px;

height: 40px;

background-color: purple;

z-index: -1;

}

</style>

<script src="./animate.js"></script>

<!-- 引入封装好的动画js文件-->

</head>

<body>

<div class="sliderbar">

<span>←</span>

<div class="con">问题反馈</div>

</div>

<script>

//1.获取元素

var sliderbar = document.querySelector('.sliderbar');

var con = document.querySelector('.con');

sliderbar.addEventListener('mouseenter', function () {

animate(con, -160, function () {

// 当con盒子向左移动的动画执行完毕后,将⬅改为➡

sliderbar.children[0].innerHTML = '➡';

});

})

sliderbar.addEventListener('mouseleave', function () {

animate(con, 0, function () {

// 当con盒子向右移动的动画执行完毕后,将➡改为⬅

sliderbar.children[0].innerHTML = '⬅';

});

})

</script>

</body>

</html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。