首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让"onmousemove“在不同的div上切换图片?

要实现"onmousemove"在不同的div上切换图片,可以通过以下步骤:

  1. 首先,需要在HTML中创建多个div元素,并为每个div设置一个唯一的id,以便在JavaScript中引用它们。
代码语言:txt
复制
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
  1. 在JavaScript中,使用onmousemove事件监听器来捕获鼠标移动事件。当鼠标在不同的div上移动时,切换图片。
代码语言:txt
复制
document.onmousemove = function(event) {
  var x = event.clientX; // 获取鼠标的水平位置
  var y = event.clientY; // 获取鼠标的垂直位置

  // 根据鼠标位置判断当前所在的div
  if (x < 200 && y < 200) {
    // 鼠标在div1上
    document.getElementById("div1").style.backgroundImage = "url('image1.jpg')";
  } else if (x < 400 && y < 400) {
    // 鼠标在div2上
    document.getElementById("div2").style.backgroundImage = "url('image2.jpg')";
  } else {
    // 鼠标在div3上
    document.getElementById("div3").style.backgroundImage = "url('image3.jpg')";
  }
};

在上述代码中,我们使用了鼠标的水平位置和垂直位置来判断鼠标所在的div。根据判断结果,我们可以通过修改div的样式来切换不同的图片。

  1. 在CSS中,为每个div设置合适的样式,包括宽度、高度和背景颜色等。
代码语言:txt
复制
div {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

通过以上步骤,当鼠标在不同的div上移动时,"onmousemove"事件将会触发,并根据鼠标所在的div切换相应的图片。

请注意,以上代码仅为示例,实际应用中可能需要根据具体需求进行修改和优化。

参考腾讯云相关产品:腾讯云云服务器(CVM)- https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Android初级】如何APP无法指定系统版本运行

随着市面上越来越多三方APP出现,某些手机厂商也开始对这些APP进行了安装限制或者运行限制,或者三方APP自身版本过低,无法被特定系统版本所支持。...今天我将要模拟实现一个“由于APP自身版本过低、导致无法在当前系统版本运行”功能效果。...实现思路如下: 要获得APP目标运行版本,也要知道系统编译版本 通过版本比较,进入该APP时,给用户做出“不支持运行”提示 用户确认提示后,直接退出该APP 关键点是 targetSdkVersion...} }) .create() .show(); } } 2、AndroidManifest.xml...我们注意到程序中使用是 getApplicationInfo().targetSdkVersion,说明这个变量是 ApplicationInfo.java 成员变量,这个值是安装APK过程中、

2.8K20

如何机器读懂图片文字?飞桨助您快速了解OCR

,前提假设文本已经检测到,限定在一个比较小行内,然后如何来进行文本识别部分内容。...数据示例: 我们使用训练和测试数据如下图所示,每张图片包含单行不定长英文字符串,这些图片都是经过检测算法进行预框选处理。 ? 训练集中,每张图片对应label是汉字词典中索引。...data_reader.py中,会按照用户设置DATA_SHAPE调整测试图像高度,所以测试图像可以有不同高度。但是,DATA_SHAPE需要和训练模型时保持严格一致。...data_reader.py中,会按照用户设置DATA_SHAPE调整预测图像高度,所以预测图像可以有不同高度。但是,DATA_SHAPE需要和训练模型时保持严格一致。...下图为使用默认参数默认数据集训练CTC model收敛曲线,其中横坐标轴为训练迭代次数,纵轴为样本级错误率。其中,蓝线为训练集样本错误率,红线为测试集样本错误率。

2.9K20
  • 【实战】Canvas实现图片上标注、缩放、移动和保存历史状态

    监听canvas画布各种鼠标事件 这个控制移动的话,我们首先可以弄一个方法来监听画布鼠标的各种事件,可以区分不同模式来进行不同事件处理 const handleCanvas = () => {...== 0) return // 为容器添加移动事件,可以空白处移动图片 wrap.onmousemove = (event: MouseEvent) => { const moveX...实现鼠标图标的变化 我们简单处理一下,画笔模式则是画笔图标,橡皮擦模式下鼠标是橡皮擦,移动模式下就是普通移动图标 切换模式时候,设置一下不同图标 const handleMouseModeChange...切换图片 现在的话只是一个demo状态,通过点击选择框,切换不同图片 ?...== 0) return // 为容器添加移动事件,可以空白处移动图片 wrap.onmousemove = (event: MouseEvent) => { const

    6.3K40

    【动画进阶】神奇 3D 卡片反光闪烁动效

    而本文,我们不会完全还原此效果,而是基于此效果,尝试去制作这么一个类似的卡片交互效果: 该效果几个核心点: 卡片 3D 旋转跟随鼠标移动效果 如何卡片在 Hover 状态,有不同光泽变化 如何卡片在...卡片 3D 旋转跟随效果 OK,接下来,如何实现 3D 卡片效果呢? 这个效果之前 交互更加生动!有意思鼠标跟随 3D 旋转动效 实现过一次,我们复习一下。...首先看 X 方向上移动: 这里,我们需要以元素中心为界: 当鼠标中心右侧连续移动,元素绕 Y 轴移动,并且值从 0 开始,越来越大,范围为(0, +∞)deg 反之,当鼠标中心左侧连续移动,元素绕...看似复杂,其实只需要简单利用混合模式即可。其中本质就是图片叠加上黑白相间渐变,再调整混合模式,就能实现上述高光效果。...通过不同混合模式与不同渐变背景,可以排列组合出非常多种有趣有意思效果。感兴趣,一定动手试试!

    30620

    如何长大于宽,宽大于长图片能正常显示一个区块内

    现在有这么一个需求,一个宽940px,高660px区域内,里面有一张图,其图大小不确定,可能高大于宽,可能宽大于高,问题是要让这张图片在区域内能正常显示,比例不失调。...问题在于,当图片为宽图时设置width:100%,而图片为长图时需设置height:100%。这样就需要使用js来判断操作,非常坑爹。 在网上查阅了资料后中和两篇文章,给出了解决办法。...p=61 张鑫旭 :大小不固定图片、多行文字水平垂直居中。...这是个很实用也是很聪明办法,对于维护控制成本都很不错。微软必应图片搜索图片排列就是使用这种方法。...方法原理很简单,使用一个透明gif图片做覆盖层,高宽拉伸至所需要大小,然后给这个gif图片一个background-position:center center属性。

    1.1K10

    聊聊部署不同K8S集群服务如何利用nginx-ingress进行灰度发布

    前言之前有篇文章聊聊如何利用springcloud gateway实现简易版灰度路由,里面的主人公又有一个需求,他们有个服务是没经过网关,而是直接通过nginx-ingress暴露出去,现在这个服务也想做灰度...,他知道同个集群如何利用nginx-ingress进行灰度发布,但是现在这个服务是部署集群,他查了不少资料,都没查到他想要答案,于是就和我交流了一下,看我这边有没有什么实现思路,今天就来聊下这个话题...:不同K8S集群服务如何利用nginx-ingress进行灰度发布前置知识nginx-ingress自身能提供哪些灰度能力?...svc-old svc-newsvc-old svc-old svc-old svc-old svc-newsvc-old 可以看出大概有20%比例打到新服务不同集群利用ingress进行灰度示例实现核心点如图图片上传失败...ingress本身提供灰度能力,至于不同集群灰度,其实是通过多加一层来实现,很多时候做方案设计,如果没思路,可以先通过加一层来推演。

    34510

    前端游戏编程基础-如何实现Canvas图像拖拽、点击等操作

    Canvas理解中就好像在一张画布绘制图像,它只能看到却“摸”不到,那要如何进行操作呢。我不知道网上是怎么做,这里用自己想法做了个DEMO分享给大家。...初步想法是将一个与Canvas图像大小差不多div覆盖在其拖拽div时将获取光标坐标修正后传给Canvas绘制函数并刷新图像位置。...当点击时,记录下光标div位置。mwidth和mheight表示光标落点相对于div左边和上边距离。如果不加修正: ?...这就是不加修正结果,当光标点下时,div坐标即左上角会与光标坐标一致。 修正后: ? 点击时光标总会“粘”div某点。...,注意是要同时限定div图片活动范围。

    2K70

    前端游戏编程基础-如何实现Canvas图像拖拽、点击等操作

    Canvas理解中就好像在一张画布绘制图像,它只能看到却“摸”不到,那要如何进行操作呢。我不知道网上是怎么做,这里用自己想法做了个DEMO分享给大家。...初步想法是将一个与Canvas图像大小差不多div覆盖在其拖拽div时将获取光标坐标修正后传给Canvas绘制函数并刷新图像位置。...当点击时,记录下光标div位置。mwidth和mheight表示光标落点相对于div左边和上边距离。如果不加修正: ?...这就是不加修正结果,当光标点下时,div坐标即左上角会与光标坐标一致。 修正后: ? 点击时光标总会“粘”div某点。...,注意是要同时限定div图片活动范围。

    1.9K80

    函数式编程看React Hooks(二)事件绑定副作用深度剖析

    也会触发 App 重新运行。 App 组件中 onMouseMove 形态。 const onMouseMove = e => { if (!...我之所以花费这么长篇幅来讲解这个 onMouseMove 实际使用中样子,就是想你明白,千万不要被 class 模式给误导了。...只要是我们 isTag 更新时候,重新去绑定事件监听中回调函数 onMouseMove,就可以解决我们问题。...还记得我们 一篇文章中,介绍 dep 比较原理吗?直接对值进行比较。也就是意味着函数对比的话,就是地址进行比较,显然,每次创建函数地址都是不同。...(言外之意就是,每一次重新渲染,都会导致 onMouseMove 重新绑定,不单单是 isTag, count 两个值改变,每一个变量改变引起重新渲染都会导致 onMouseMove 更新) 那么我们要如何解决么

    1.9K20

    阻止mouseover冒泡行为_onmousedown是什么意思

    唯一区别是 onmouseenter 事件不支持冒泡 。 二. 实例演示onmousemove, onmouseenter 和 mouseover 事件不同 onmousemove 事件鼠标移动到 div 元素就开始时触发,在这个div移动一直触发(冒泡)。...DOCTYPE html> 其中: 1. onmousemove 事件鼠标移动到 div 元素时触发,鼠标div、p、span元素内移动(即白框内也会触发,事件冒泡到父级div); 2. mouseenter...事件中有鼠标指针进入 div 元素时触发,鼠标进入p、span元素内不会触发,因为不支持事件冒泡; 3. onmouseover 事件鼠标指针进入 div 元素时触发,子元素也会触发(p 和...,既然事件是冒泡传递,那可不可以某个父节点统一处理事件,通过判断事件发生地(即事件产生节点),然后做出相应处理呢?

    1.6K20

    React高级特性之Render Props

    }}随着光标屏幕上面移动,这个组件将会在文档标签里面显示当前光标x,y轴坐标值。...实际,它还不能达到真正可复用。假设,我们需要实现这么一个组件。它需要渲染出一只用图片表示猫去追逐光标屏幕移动视觉效果。... ); }}这种方式实现可能对个别的场景有用,但是,我们还是没有达成通过封装这种行为真正地复用目标。...别的应用场景下,每一次当我们需要获取光标屏幕坐标的时候,我们都需要重新创建一个组件(例如,一个跟相似组件)来完成这个业务场景所对应渲染任务。...举个例子,假如你共享行为(监听mousemove事件,获得光标屏幕坐标)时不想通过组件来完成,而是想通过高阶组件withMouse来完成的话,那么就可以很简单地通过创建一个带render

    48210

    JavaScript动态图片热区(绘制多个矩形并分别跳转链接)

    前言 不知道大家有没有遇到一张图片上面有很多个商品展示图,需要给每个商品添加一个链接,点击跳转到各自商品详情页。 这个需求在前端其实有一个专业术语“图像地图”,大家先看看w3c简单示例 ?...多边形会自动封闭,因此列表结尾不需要重复第一个坐标来闭合整个区域。...请注意,定义矩形实际是定义带有四个顶点多边形一种简化方法。...进阶 想法 下面我们回到正题:“一张图片上面有很多个商品展示图,需要给每个商品添加一个链接,点击跳转到各自商品详情页”,这个需求上面。...document.onmousemove = function(ev) { // 移动时监听鼠标位置,向hot_div添加left,top,width,height div.style.left

    3.6K30

    React高级特性--Render Props

    }}随着光标屏幕上面移动,这个组件将会在文档标签里面显示当前光标x,y轴坐标值。...实际,它还不能达到真正可复用。假设,我们需要实现这么一个组件。它需要渲染出一只用图片表示猫去追逐光标屏幕移动视觉效果。... ); }}这种方式实现可能对个别的场景有用,但是,我们还是没有达成通过封装这种行为真正地复用目标。...别的应用场景下,每一次当我们需要获取光标屏幕坐标的时候,我们都需要重新创建一个组件(例如,一个跟相似组件)来完成这个业务场景所对应渲染任务。...举个例子,假如你共享行为(监听mousemove事件,获得光标屏幕坐标)时不想通过组件来完成,而是想通过高阶组件withMouse来完成的话,那么就可以很简单地通过创建一个带render

    43220

    一个简单滑块拖动验证码实例

    3、如何获取到鼠标的x坐标——使用clientX事件(当事件被触发时,鼠标指针水平坐标)。...4、鼠标移动事件发生后根据从最开始点击X值到移动后X值之差,作为滑块移动差值———— 鼠标移动事件 (onmousemove); 5、获取鼠标移动之后X坐标 6、获得初始X坐标和移动后X值 7、...注意:哪怕鼠标移动时候超出了最外面的方块区域,滑块也要可以移动。所以不能只滑块设置移动事件,需要在文档document设置移动事件。...主要用到事件: 1、鼠标点击事件onmousedown; 2、鼠标移动事件onmousemove; 3、获取鼠标指针X坐标 clientX; 4、鼠标按键被松开 onmouseup;(有点类似与 click...//这里注意一下,获得minusX只是一个差值,没有单位想 滑块位置改变还需要加上 单位px //这个时候滑块会跟随鼠标整个页面一行跑,价格条件判段,限制 滑块移动区域不可以超过边框

    2K10

    彻底搞懂拖拽——基于鼠标事件拖拽以及基于HTML5 API拖拽完整实现

    所有拖动事件绑定在该div,可以使用setCapture onmousemove和onmouseup需要在onmousedown里面绑定 存在问题 会被拖出边界 ?...这里涉及几个知识点: 可拖动元素: 又称为源对象,是指我们鼠标点击之后准备拖动对象(图片div、文字等) 可放置元素: 又称为目标对象,是指可以放置源对象区域 事件:...当用户开始拖动一个元素或选中文本时触发 drop ondrop 当元素或选中文本可释放目标上被释放时触发 ps:当从操作系统向浏览器中拖动文件时,不会触发dragstart 和dragend...事件 接口: HTML5为所有的拖动相关事件提供了一个新属性: 源对象和目标对象事件间传递数据 ev.dataTransfer {}//数据传递对象 源对象事件处理中保存数据:...ps:图片来源(CAN I USE?) ---- 具体实现代码 code: <!

    3.3K30

    前端必学——实现电商图片放大镜效果(附代码)

    */    filter: alpha(opacity = 30);/*兼容不同浏览器*/    position: absolute;    display: none;}window.onload = function(){//文档内容加载完之后再执行    //当鼠标移入小图片,显示遮罩层和放大区域    $('small').onmouseenter = function...        $('mask').style.display='none';        $('big').style.display="none";    }    //鼠标移动    $('small').onmousemove...= function(ev){        var e = ev || window.event;        //计算鼠标的位置,并鼠标显示遮罩层中间        var l = e.clientX...        $('mask').style.left = l + 'px';        $('mask').style.top = t + 'px';        //通过遮罩层移动,来计算出放大后图片显示区域

    34010
    领券