首页 > 代码库 > 用jQuery实现鼠标移动切换图片动画

用jQuery实现鼠标移动切换图片动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画</title>
<style>
.img{ width:1000px; height:300px; margin:0 auto; position:relative; margin-top:5px; border-radius:10px; overflow:hidden;}
.img-0{ widt:1000px; height:300px; position:absolute; z-index:21; }
.img-1{ widt:1000px; height:300px; position:absolute; z-index:10; display:none}
.img-2{ width:1000px; height:300px; position:absolute; z-index:15; display:none}
.img-3{ width:1000px; height:300px; position:absolute; z-index:20; display:none}
.img-4{ width:960px; height:70px; position:relative;  z-index:22; border:1px solid #CCC; border-radius:10px;
margin-top:229px; float:left; margin-left:20px; background-color:#000; opacity:0.5; color: azure;}
.img-4v1{ width:275px; height:70px; position:relative; float:left; border-left: 1px solid #CCC; line-height:70px;
 text-align:center; font-size:18px;}
 .img-4v1:hover{ cursor:pointer;}
</style>
</head>

<body>

<div class="img">
         <div class="img-0" id="oo"><img  src="http://www.mamicode.com/img/cn-1.jpg"/></div>
         <div class="img-1" id="a" ><img  src="http://www.mamicode.com/img/cn-1.jpg"/></div>
        <div class="img-2" id="b" ><img  src="http://www.mamicode.com/img/cn-2.jpg"/></div>
        <div class="img-3" id="c" ><img  src="http://www.mamicode.com/img/cn-3.jpg"/></div>
        <div class="img-4">
                <div  id="img-a" class="img-4v1" style="margin-left:68px">》外国留学生培养</div>
                <div id="img-b" class="img-4v1" onm ouseover="">》学生出国交流</div>
                <div id="img-c" class="img-4v1" style="border-right:1px solid #CCC">》教职工出国交流</div>
        </div>
 </div>
</body>
</html>
<script type="application/javascript" src="http://www.mamicode.com/JS/jquery-3.2.0.js" >

</script>
<script>
$(document).ready(function(){
  $("#img-a").mouseenter(function(){ /* 鼠标移动到DIV上的效果*/
     $("#a").fadeIn();  /*    淡入ID为A的div*/
     $("#oo").hide()   /* 隐藏ID为OO的DIV    */
  });
});
$("#img-a").mouseleave(function(){ /* 鼠标离开DIV上的效果*/
    $("#a").fadeOut();     /*    淡出ID为A的div*/
     $("#oo").show()        /* 显视ID为OO的DIV    */
  });
$(document).ready(function(){  
  $("#img-b").mouseenter(function(){
     $("#b").fadeIn();
     $("#oo").hide()
  });
});
$("#img-b").mouseleave(function(){
    $("#b").fadeOut();
    $("#oo").show()
  });
$(document).ready(function(){
  $("#img-c").mouseenter(function(){
    
     $("#oo").hide()
     $("#c").fadeIn();
  });
});
$("#img-c").mouseleave(function(){
    $("#c").fadeOut();
    $("#oo").show()
  });
</script>

用jQuery实现鼠标移动切换图片动画