[功能] 鼠标移动到图片就会显示另一张图片 (附代码）

2018-07-03

两种效果

案例一代码

<html>
<head>
<script language="javascript" >
 
    function show_img()//显示图片函数，鼠标移到链接触发
        {document.getElementById("img_1").style.display = "block";}
    function hide_img()//隐藏图片函数，鼠标离开链接触发
	{document.getElementById("img_1").style.display = "none";}
        
</script>
</head>
<body>
<div align="center">
   <a href="#"  onMouseOver="show_img()" onMouseOut="hide_img()" >
     <img id="img_2" src="#"  /></a><!--自己定义图片src链接！-->
   <div align="center"><img id="img_1" src="#"  style="display:none" />
 </div>
</div>

</body>
</html>

案例二代码

<div class="imglist" align="center">
	<img class="show" src="#"/>
	<img class="hidden" src="#"/>
</div>
<style>
	.imglist .show{display:block;}
	.imglist .hidden{display:none;}  
</style>  
<script>
$(document).ready(function(){
   $(".imglist .show").mouseover(function(){
      $(this).parent(".imglist").children(".show").css("display","none");
      $(this).parent(".imglist").children(".hidden").fadeIn();
      $(this).parent(".imglist").children(".hidden").css("display","block");
    });
   $(".imglist .hidden").mouseout(function(){
      $(this).parent(".imglist").children(".hidden").css("display","none");
      $(this).parent(".imglist").children(".show").fadeIn();
      $(this).parent(".imglist").children(".show").css("display","block");
   });
})</script>
</body>
</html>

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

HTML JavaScript

3887 0