You are here
jquery_垂直水平翻转效果 水平翻转和垂直翻转 有大用
效果见 http://www.jq22.com/yanshi2044
见 附件 是 旋转代码下载
附件 其实是由三部分组成 1)html 下面是html代码 2)jquery.js 3)三个图像
<!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=gbk" />
<title>jquery 垂直/水平旋转</title>
<meta name="description" content="垂直/水平旋转" />
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial;}
.brand a{
display: block;
float: left;
margin: 20px;
width: 180px;
height: 240px;
text-align: center;
position: relative;
}
.brand img{
width: 180px;
height: 240px;
}
.brand .info{
display: none;
background-color: #f0f0f0;
color: #369242;
}
.vertical .info{
width: 0;
height: 240px;
margin: 0 auto;
}
.horizontal img{
position: absolute;
top: 0;
left: 0;
}
.horizontal .info{
width: 180px;
height: 0;
top: 120px;
position: absolute;
left: 0;
}
</style>
<div style="width:720px;margin:0 auto;">
<div id="vertical" class="brand vertical">
<a target="_blank" href="#"><img alt="" src="images/1.jpg" /><div class="info">图1</div></a>
<a target="_blank" href="#"><img lta="" src="images/2.jpg" /><div class="info">图2</div></a>
<a target="_blank" href="#"><img alt="" src="images/3.jpg" /><div class="info">图3</div></a>
</div>
<div style="clear:both;"></div>
<div id="horizontal" class="brand horizontal">
<a target="_blank" href="#"><img alt="" src="images/1.jpg" /><div class="info">图1</div></a>
<a target="_blank" href="#"><img alt="" src="images/2.jpg" /><div class="info">图2</div></a>
<a target="_blank" href="#"><img alt="" src="images/3.jpg" /><div class="info">图3</div></a>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//品牌翻转
var turn = function(target,time,opts){
target.find('a').hover(function(){
$(this).find('img').stop().animate(opts[0],time,function(){
$(this).hide().next().show();
$(this).next().animate(opts[1],time);
});
},function(){
$(this).find('.info').animate(opts[0],time,function(){
$(this).hide().prev().show();
$(this).prev().animate(opts[1],time);
});
});
}
var verticalOpts = [{'width':0},{'width':'180px'}];
turn($('#vertical'),100,verticalOpts);
var horizontalOpts = [{'height':0,'top':'120px'},{'height':'240px','top':0}];
turn($('#horizontal'),100,horizontalOpts);
</script>
</body>
</html>
| 附件 | 大小 |
|---|---|
 旋转代码.zip | 164.03 KB |
普通分类: