淘宝侧栏弹出模拟

最新推荐文章于 2023-12-27 10:09:20 发布

晓晓2022

最新推荐文章于 2023-12-27 10:09:20 发布

阅读量56

点赞数

分类专栏：前端基础文章标签： javascript css3 html css 前端

本文链接：https://blog.csdn.net/qq_45911604/article/details/123610402

版权

前端基础专栏收录该内容

22 篇文章 1 订阅

订阅专栏

淘宝侧栏弹出模拟

效果展示：
在这里插入图片描述要求鼠标放上去，后实现弹出操作，同时将颜色变成pink，展示欢迎光临。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            position: absolute;
            left: -170px;
            top: 50px;
            width:200px;
            height: 50px;
            border-radius: 5px;
            background-color:skyblue;
            text-align: center;
            line-height: 50px;
        }
    </style>
    <script src="./amiation.js"></script>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('mouseenter',function (params) {
            amiation(div,0,function () {
                div.innerHTML = '欢迎光临';
                div.style.backgroundColor = 'pink';
            });
        });
        div.addEventListener('mouseleave',function (params) {
            amiation(div,-180,function () {
                div.innerHTML = '';
                div.style.backgroundColor = 'skyblue';
            });
        });
    </script>
</body>
</html>

amiation.js文件

//逐渐减速
function amiation(obj, target, callback) {
    //在开启新的定时器之前,关掉原来的定时器
    //防止事件反复触发造成div加速效果
    clearInterval(obj.timer);
    obj.timer = setInterval(function (params) {
        //由于obj.offsetLeft不断的变大,step越来越小
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (callback)//回调函数
            {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 1);
}

注意事项：
1，关于回调夯实callback()理解，

回调函数：
function amiation(obj, target, callback) 
{
	//上面参数callback理解：
	callback = function(){}
	...
	if(callback)
	{
	callback();
	}
	...
}

调用时：
amiation(div,-180,function ()
 {
 	//这里的代码在amiation执行完后再执行
});

晓晓2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淘宝侧栏弹出模拟

淘宝侧栏弹出模拟效果展示：要求鼠标放上去，后实现弹出操作，同时将颜色变成pink，展示欢迎光临。代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
复制链接

扫一扫