以下是 jQuery九宫格鼠标悬停图文切换js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>jQuery九宫格鼠标悬停图文切换</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var m=0;
$(".mindiv").hover(function(){
m = $(this).val();
if(m>0){
$(this).children(".divbox").stop(true, true).animate({"top":"0%"},200);
m=m-1;
}else{
$(this).children(".divbox").stop(true, true).animate({"top":"-100%"},200);
m=m+1;
}
},function(){
$(this).attr("value",m);
});
});
</script>
</head>
<body>
<div id="main">
<li id="min_1" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_2" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_3" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_4" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_5" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_6" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_7" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_8" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_9" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_10" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_11" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
<li id="min_12" class="mindiv">
<div class="divbox">
<div id="box1" class="boxone"></div>
<div id="box2" class="boxtwo"></div>
</div>
</li>
</div>
</body>
</html>
CSS代码(style.css):
@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/* main */
#main{width:950px;height:460px;overflow:hidden;position:relative;margin:20px auto;}
.mindiv{position:absolute;cursor:pointer;overflow:hidden;}
.divbox{width:100%;height:200%;position:absolute;top:0;left:0px;}
.divbox .boxone{width:100%;height:50%;}
.divbox .boxtwo{width:100%;height:50%;}
#min_1{width:150px;height:230px;background:#BF1D1A;top:0px;left:0px;}
#min_1 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) 0px 0px;}
#min_1 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) 0px 0px;}
#min_2{width:190px;height:270px;background:#2DC3C2;top:0px;left:150px;}
#min_2 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) -151px 0px;}
#min_2 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) -151px 0px;}
#min_3{width:245px;height:135px;background:#2DC3C2;top:0px;left:340px;}
#min_3 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) -340px 0px;}
#min_3 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) -340px 0px;}
#min_4{width:245px;height:135px;background:#E34546;top:135px;left:340px;}
#min_4 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) -341px -135px;}
#min_4 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) -340px -135px;}
#min_5{width:180px;height:135px;background:#F0640F;top:0px;left:585px;}
#min_5 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) -585px 0px;}
#min_5 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) -585px 0px;}
#min_6{width:180px;height:135px;background:#F2AB03;top:135px;left:585px;}
#min_6 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) -585px -135px;}
#min_6 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) -585px -135px;}
#min_7{width:185px;height:185px;background:#06B6A1;top:0px;left:765px;}
#min_7 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) -765px 0px;}
#min_7 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) -765px -0px;}
#min_8{width:150px;height:230px;background:#2F2F2F;top:230px;left:0px;}
#min_8 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) 0px -230px;}
#min_8 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) 0px -230px;}
#min_9{width:250px;height:190px;background:#8F8669;top:270px;left:150px;}
#min_9 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) -150px -270px;}
#min_9 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) -150px -270px;}
#min_10{width:185px;height:190px;background:#85B32F;top:270px;left:400px;}
#min_10 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) -400px -270px;}
#min_10 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) -400px -270px;}
#min_11{width:180px;height:190px;background:#8E5917;top:270px;left:585px;}
#min_11 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) -585px -270px;}
#min_11 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) -585px -270px;}
#min_12{width:185px;height:275px;background:#CB266B;top:185px;left:765px;}
#min_12 #box1{background:url(images/DFDD8585CD524FDF7A3D945DCCD60B6B676B048C20740_950_460.JPEG) -765px -185px;}
#min_12 #box2{background:url(images/B3958D934DC4B89477EEADB2A1EBC737B683258C50F9F_950_460.JPEG) -765px -185px;}
分享到QQ
分享到微博
微信扫一扫
