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

<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

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

html js 鼠标移动图片跟着移动相关推荐

基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
css3 局部放大,CSS3/JS 鼠标悬停图片局部放大动效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 $('.tile') // tile mouse actions .on('mouseover', func ...
前端图片跟着鼠标跑，鼠标到哪图片到哪
电脑鼠标一般都是一个小箭头的图标,如果我们想要设置一个图片跟着鼠标走,鼠标移动图片跟着移动该怎么做呢? 效果如下: 代码如下: <!DOCTYPE html> <html lang= ...
jQuery实现图片跟着鼠标移动的效果
例子: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
用鼠标拖动图片的JS代码
代码简介: 用鼠标拖动一个图片移动,就像拖动一个层一样,这是一个JS拖动类代码,你可以无限制的增加图片,代码复用率比较高. 代码内容: View Code <html><HEAD&g ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法
本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 鼠标触发图片抖动效果 .shakeimage{ position:relative } //configur ...
HTML鼠标悬浮空心圆点切换图片,js实现鼠标切换图片（无定时器）
本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应 ...

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

html js 鼠标移动图片跟着移动相关推荐

最新文章

热门文章