用jQuery实现鼠标移动切换图片动画
Posted <一>
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用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="../img/cn-1.jpg"/></div>
<div class="img-1" id="a" ><img src="../img/cn-1.jpg"/></div>
<div class="img-2" id="b" ><img src="../img/cn-2.jpg"/></div>
<div class="img-3" id="c" ><img src="../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" onmouseover="">》学生出国交流</div>
<div id="img-c" class="img-4v1" style="border-right:1px solid #CCC">》教职工出国交流</div>
</div>
</div>
</body>
</html>
<script type="application/javascript" src="../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实现鼠标移动切换图片动画的主要内容，如果未能解决你的问题，请参考以下文章