鼠标移动切换图片操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">

     function picture(pic){

     //id读取图片及路径

      document.getElementById('pic').src='ps/'+pic;
     }
</script>
</head>
<body>

  <img id="pic" src="ps/01.jpg" width="400px"

//移上去事件 

alt="" οnmοuseοver='picture("01.jpg")'οnmοuseοut='picture("02.jpg")' 

//移出去事件

οnkeydοwn='picture("03.jpg")'> 

</body>
</html>
原生鼠标移动图片切换是指在网页中使用原生JavaScript实现的一种效果,通过监听鼠标移动事件,当鼠标移动到指定区域时,切换显示不同的图片。以下是实现原生鼠标移动图片切换的步骤: 1. 在HTML中创建一个包含多张图片的容器,例如使用`<div>`元素,并为每张图片设置一个唯一的ID。 2. 使用CSS样式为容器和图片设置合适的样式,例如设置容器的宽度、高度和背景颜色等。 3. 在JavaScript中获取容器和图片的引用,可以使用`document.getElementById()`方法。 4. 使用`addEventListener()`方法监听鼠标移动事件,例如`mousemove`事件。 5. 在事件处理函数中,根据鼠标的位置或其他条件,判断应该显示哪张图片。 6. 使用JavaScript修改容器的背景图或图片元素的`src`属性,实现图片切换效果。 下面是一个简单的示例代码: HTML部分: ```html <div id="imageContainer"> <img id="image1" src="image1.jpg"> <img id="image2" src="image2.jpg"> </div> ``` CSS部分: ```css #imageContainer { width: 400px; height: 300px; background-color: #ccc; } #imageContainer img { display: none; width: 100%; height: 100%; } #imageContainer img.active { display: block; } ``` JavaScript部分: ```javascript var container = document.getElementById("imageContainer"); var image1 = document.getElementById("image1"); var image2 = document.getElementById("image2"); container.addEventListener("mousemove", function(event) { // 根据鼠标位置或其他条件判断应该显示哪张图片 if (event.clientX < container.offsetWidth / 2) { image1.classList.add("active"); image2.classList.remove("active"); } else { image1.classList.remove("active"); image2.classList.add("active"); } }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值