您现在的位置是：网站首页>JS经典实例JS经典实例

JS实例：鼠标悬停切换图片

程大白2022-07-01【JS经典实例】人已围观

简介个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。每天工作回家后就能访问自己的网站，一边听着音乐，一边写写文章。

要实现鼠标悬停切换图片的效果，你可以使用HTML和JavaScript来完成。这里提供一个简单的实例，说明如何实现这个功能。

首先，你需要准备两张图片，一张是默认显示的图片，另一张是鼠标悬停时显示的图片。

 

HTML




	html复制代码



	

		
			

				
					

						 

						
				
					<!DOCTYPE html> 
			

			

				
					

						 

						
				
					<html lang="en"> 
			

			

				
					

						 

						
				
					<head> 
			

			

				
					

						 

						
				
					<meta charset="UTF-8"> 
			

			

				
					

						 

						
				
					<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
			

			

				
					

						 

						
				
					<title>鼠标悬停切换图片</title> 
			

			

				
					

						 

						
				
					</head> 
			

			

				
					

						 

						
				
					<body> 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					<img id="hoverImage" src="defaultImage.jpg" alt="默认图片" width="200" height="200"> 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					<script src="script.js"></script> 
			

			

				
					

						 

						
				
					</body> 
			

			

				
					

						 

						
				
					</html>
			

		
	





	

	JavaScript (script.js)





	javascript复制代码



	

		
			

				
					

						 

						
				
					document.addEventListener('DOMContentLoaded', function() { 
			

			

				
					

						 

						
				
					var image = document.getElementById('hoverImage'); 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					image.addEventListener('mouseover', function() { 
			

			

				
					

						 

						
				
					this.src = 'hoverImage.jpg'; // 鼠标悬停时显示的图片 
			

			

				
					

						 

						
				
					}); 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					image.addEventListener('mouseout', function() { 
			

			

				
					

						 

						
				
					this.src = 'defaultImage.jpg'; // 鼠标移开时显示的默认图片 
			

			

				
					

						 

						
				
					}); 
			

			

				
					

						 

						
				
					});
			

		
	





	在这个例子中，我们首先通过document.getElementById获取到图片元素，然后为它添加了两个事件监听器：mouseover和mouseout。当鼠标悬停在图片上时，mouseover事件被触发，图片的src属性被更改为hoverImage.jpg，显示悬停时的图片。当鼠标移开图片时，mouseout事件被触发，图片的src属性被恢复为defaultImage.jpg，显示默认的图片。



	确保将defaultImage.jpg和hoverImage.jpg替换为你自己的图片路径。


                     
        
        
很赞哦！ (74)

        

          
上一篇：上一篇：没有了 

          
下一篇：下一篇：JS特效-360度全景图片预览效果 

        

      

      
            
      
  
      
    

    

      
相关文章

      
    


    

      
文章评论

      
    
      

    

  

  
  

    

      
点击排行

      
6条网页设计配色原则,让你秒变配色高手

      
    

    

      
本栏推荐

      
6条网页设计配色原则,让你秒变配色高手

      
    

    

      
    
        
      

    

    

      
标签云

      
    

    

      
猜你喜欢

      
    

    

      
    
        
      

    

    

      
站点信息

      
    
        
  • 建站时间：2018-10-24
    • 
        
  • 网站程序：cms
    • 
        
  • 主题模板：杨青青的《今夕何夕》
    • 
        
  • 文章统计：299条
    • 
        
  • 文章评论：490条
    • 
        
  • 统计数据：百度统计
    • 
        
  • 微信公众号：扫描二维码，关注我们
    •