html js 鼠标移动图片跟着移动

最新推荐文章于 2023-04-08 00:44:43 发布

结城明日奈是我老婆

最新推荐文章于 2023-04-08 00:44:43 发布

阅读量3k

点赞数

分类专栏： html学习专栏文章标签： html css spring boot

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121498398

版权

html学习专栏专栏收录该内容

36 篇文章 0 订阅

订阅专栏

该博客介绍了一个简单的HTML和JavaScript实现，通过监听鼠标的移动，使图片在指定区域内随之移动。首先获取鼠标坐标，然后根据坐标调整图片的位置。通过设置CSS过渡效果，实现了平滑的移动动画。示例代码展示了如何在页面中心设置图片，并根据鼠标偏离中心的距离来改变图片的位置。

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

<html>
    <head>
        <meta charset="utf-8" />
        <title>实现在指定区域内图片随着鼠标的移动移动</title>
        <link rel="stylesheet" href="indexCss.css">
    </head>
    <body>
        <div class="shubiao">
            <div class="div_img">
                <img src="图片的地址" alt="图片" />
            </div>
        </div>
        <div class="XS">
            <p class="WinX">
                鼠标的X值:
                <p id="winXZ">
                    0
                </p>
            </p>
            <br />
            <p class="WinY">
                鼠标的Y值:
                <p id="winYZ">
                    0
                </p>
            </p>
        </div>
    </body>
    <script src="indexJS.js"></script>
</html>

css只是布局随便搞搞就好了ustify-content: center; align-items: center;这俩个是居中,min-height: 100vh;最小高度是100vh

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.shubiao{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.shubiao .div_img img{
    position: relative;
    display: flex;
    width: 500px;
    height: 350px;
    background-size: cover;
}

.XS{
    position: relative;
    left: 0;
    top: -80px;
    display: flex;
}

.XS .WinX,
.XS .WinY
{
    display: inline;/*取消换行*/
}

首先若是要实现鼠标移动图片跟着移动第一步是要捕获到鼠标的位置:

function WinDiv(){
    winXZ.innerHTML = window.event.clientX;//鼠标X轴方向
    winYZ.innerHTML = window.event.clientY;//鼠标Y轴方向
}
document.onmousemove = WinDiv;//实现效果

在这里插入图片描述

我的图片设定是居中的，先把鼠标放到中心位置查看坐标(对之后计算有用)

我们让图片在中间为界的位置上只是移动一次:
(1)首先我们获取到图片id值才可以方便进行更改所以我们在img标签上多增加一个id="":

<img src="图片的地址" alt="图片" id="img1"/>

(2)为了添加有移动的效果我们在css里定义一个新的元素:

#img1{
	transition: 0.5s;
}

(3)然后我们根据中间的位置写一个简单的js(javascript)判断:

function WinDiv(){
    winXZ.innerHTML = window.event.clientX;
    winYZ.innerHTML = window.event.clientY;
    let img1 = document.getElementById('img1');
    if(window.event.clientX > 767){
        img1.style.left = 5 + "px";
    }
    if(window.event.clientX < 767){
        img1.style.left = -5 + "px";
    }
    if(window.event.clientY > 393){
        img1.style.top = 5 + "px";
    }
    if(window.event.clientY < 393){
        img1.style.top = -5 + "px";
    }
}
document.onmousemove = WinDiv;
//中心X:767,Y:393

就完成了简单的图片跟着键盘动了，逻辑思维算法都在里面随意更改

结城明日奈是我老婆

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
html js 鼠标移动图片跟着移动

<html> <head> <meta charset="utf-8" /> <title>实现在指定区域内图片随着鼠标的移动移动</title> <link rel="stylesheet" href="indexCss.css"> </head> <body> <div class="shubiao">
复制链接

扫一扫