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

2024-05-19 00:33:18

目标效果：

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>

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

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

【重点案例】b站pink老师JavaScript的PC端网页特效案例代码——网页轮播图
目录代码段: 1.index.js部分(全是重点) 2.animate.js部分(重点,是之前封装好的动画函数) 3.index.html部分(重点在标红区) 4.index.css部分(重点在标红 ...
b站pink老师JavaScript的PC端网页特效案例代码——仿淘宝返回顶部(带有动画的返回顶部)
目标效果: 在之前写好的的代码基础上实现点击返回顶部字样,即可用缓动动画返回顶部[见代码段中4.和动画函数部分] 重点语法: 滚动窗口至文档中的特定位置 window.scroll(x,y) x, ...
b站pink老师JavaScript的PC端网页特效案例代码——仿京东放大镜效果
目录原理讲解: 代码段: 1. detail.html部分(重点在标红区) 2. detail.js部分(全部都是重点) 3. detail.css部分(重点在标红区) 4. base.css部分( ...
b站pink老师JavaScript的PC端网页特效案例代码——仿淘宝固定侧边栏
目标效果: 1.当页面滚动到banner区域的顶部碰到页面顶部时,右边的侧边栏sliderbar,由之前距离页面顶部300px的固定定位,变为侧边栏sliderbar距离页面顶部的距离=页面滚 ...
b站pink老师JavaScript的PC端网页特效案例代码——筋斗云案例
目标效果: 1.最开始的时候cloud筋斗云处于最左边 2.当鼠标经过(mouseenter 不冒泡)对应li,cloud筋斗云就移到那个li(lis[i].offsetLeft获得li相对有定位的父 ...
JavaScript—— PC 端网页特效
目录一.PC 端网页特效 1. 元素偏移量 offest 系列 1.1 offset 概述 1.2 offset 与 style 区别案例:获取鼠标在盒子内的坐标案例:模拟框拖拽 html cs ...
javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
移动端、PC端网页特效
移动端网页特效标题触屏事件移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 touch(也称触摸事件),A ...
PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...

最新文章

热门文章