jquery判断鼠标移入移出

最新推荐文章于 2023-10-31 11:10:20 发布

dawkdamwdkmadk

最新推荐文章于 2023-10-31 11:10:20 发布

阅读量1.6k

点赞数

分类专栏： Javascript 文章标签：判断鼠标移入移出 jquery 百度图片列表效果

本文链接：https://blog.csdn.net/u012780176/article/details/79292212

版权

本文介绍了如何通过判断鼠标移入移出方向来创建类似百度图片搜索列表的效果。通过以div容器中心为圆心，利用atan2函数划分四个象限，动态调整坐标，实现精准的边框响应。提供了代码示例和原理解析。

摘要由CSDN通过智能技术生成

判断鼠标移入移出方向来实现很赞的效果，百度图片搜索列表中就使用了该效果

下面直接上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一只京大-鼠标移入移出案例</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
    body{background: #f2f2f2}
    .wrap{width:650px;margin: 100px auto;}
    .wrap .box {width: 200px;height: 100px;background: #ccc;display: inline-block;position: relative;overflow: hidden;}
    .wrap .content{position: absolute;left: 100%;top: 100%;z-index: 2;width: 100%;height: 100%;background:rgba(0,0,0,.6);line-height: 100px;text-align: center;color: #fff;font-size: 30px;font-family: "Microsoft Yahei";}
    .wrap .content.trans {transition:all .3s;backface-visibility: hidden;}
    </style>
</head>
<body>
    <div class="wrap">