jquery九宫格图片鼠标悬停上下滑动图片切换
摘要：jquery hover九宫格图片鼠标悬停上下滑动图片切换,支持在线浏览，在线复制,有些低版本的ie在线浏览报错，要手动刷手下，复制代码保存是支持ie6,7,8的
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鼠标悬停图片滑动切换-web开发</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
.qixi{ width:960px; height:375px; margin:0 auto; overflow:hidden; background:#F23F9E; position:relative;}
.relian{ width:240px; height:239px; overflow:hidden; position:absolute; left:10px; top:10px;}
.relian .pic{width:240px; height:239px; position:relative;}
.relian .pic2{ width:240px; height:478px; overflow:hidden; position:absolute; left:0; top:0;}
.miyue{ width:385px; height:178px; overflow:hidden; position:absolute; left:255px; top:10px;}
.miyue .pic{width:385px; height:178px; position:relative;}
.miyue .pic2{ width:385px; height:356px; overflow:hidden; position:absolute; left:0; top:0;}
.qinzi{ width:306px; height:178px; overflow:hidden; position:absolute; left:645px; top:10px;}
.qinzi .pic{width:306px; height:178px; position:relative;}
.qinzi .pic2{ width:306px; height:356px; overflow:hidden; position:absolute; left:0; top:0;}
.jiqing{ width:240px; height:112px; overflow:hidden; position:absolute; left:10px; top:255px;}
.jiqing .pic{width:240px; height:112px; position:relative;}
.jiqing .pic2{ width:240px; height:224px; overflow:hidden; position:absolute; left:0; top:0;}
.xfq{ width:200px; height:173px; overflow:hidden; position:absolute; left:255px; top:194px;}
.xfq .pic{width:200px; height:173px; position:relative;}
.xfq .pic2{ width:200px; height:346px; overflow:hidden; position:absolute; left:0; top:0;}
.qianshou{ width:314px; height:173px; overflow:hidden; position:absolute; left:460px; top:194px;}
.qianshou .pic{width:314px; height:173px; position:relative;}
.qianshou .pic2{ width:314px; height:346px; overflow:hidden; position:absolute; left:0; top:0;}
.jiqing2{ width:170px; height:173px; overflow:hidden; position:absolute; right:10px; top:194px;}
.jiqing2 .pic{width:170px; height:173px; position:relative;}
.jiqing2 .pic2{ width:170px; height:346px; overflow:hidden; position:absolute; left:0; top:0;}
</style>
</head>
<body>
<div class="qixi">
<div class="relian">
<div class="pic">
<div class="pic2"> <img src="http://www.webkfa.com/lzimg/relian.jpg" /> <a href="http://www.webkfa.com/" target="_blank"><img src="http://www.webkfa.com/lzimg/relian2.jpg" /></a> </div>
</div>
</div>
<div class="miyue">
<div class="pic">
<div class="pic2"> <img src="http://www.webkfa.com/lzimg/miyue.jpg" /> <a href="http://www.webkfa.com/" target="_blank"><img src="http://www.webkfa.com/lzimg/miyue2.jpg" /></a> </div>
</div>
</div>
<div class="qinzi">
<div class="pic">
<div class="pic2"> <img src="http://www.webkfa.com/lzimg/qinzi.jpg" /> <a href="http://www.webkfa.com/" target="_blank"><img src="http://www.webkfa.com/lzimg/qinzi2.jpg" /></a> </div>
</div>
</div>
<div class="jiqing">
<div class="pic">
<div class="pic2"> <img src="http://www.webkfa.com/lzimg/jiqing.jpg" /> <a href="http://www.webkfa.com/" target="_blank"><img src="http://www.webkfa.com/lzimg/jiqing2.jpg" /></a> </div>
</div>
</div>
<div class="xfq">
<div class="pic">
<div class="pic2"> <img src="http://www.webkfa.com/lzimg/xfq.jpg" /> <a href="http://www.webkfa.com/" target="_blank"><img src="http://www.webkfa.com/lzimg/xfq2.jpg" /></a> </div>
</div>
</div>
<div class="qianshou">
<div class="pic">http://www.webkfa.com/lzimg/
<div class="pic2"> <img src="http://www.webkfa.com/lzimg/qianshou.jpg" /> <a href="http://www.webkfa.com/" target="_blank"><img src="http://www.webkfa.com/lzimg/qianshou2.jpg" /></a> </div>
</div>
</div>
<div class="jiqing2">
<div class="pic">
<div class="pic2"> <img src="http://www.webkfa.com/lzimg/jiqing3.jpg" /> <a href="http://www.webkfa.com/" target="_blank"><img src="http://www.webkfa.com/lzimg/jiqing4.jpg" /></a> </div>
</div>
</div>
</div>
<center>
<p><strong><a href="http://www.webkfa.com" style="color:#FF9900" target="_blank">web开发</a>网站整理</strong> </p>
<p>欢迎大家进群讨论web开发知识！</p>
<p>来源于:webkfa</p>
</center>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".qixi > div").hover(function(){
$(this).find('.pic2').stop().animate({top:-$(this).find(".pic2 > img").height()},200);
},function(){
$(this).find('.pic2').stop().animate({top:'0'},200);
});
});
</script>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢