jquery css3查看原图按钮收缩隐藏特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery css3查看原图按钮收缩隐藏特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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 css3查看原图按钮收缩隐藏</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
	
	//JavaScript控制容器添加或移除“hover”，通过css3控制按钮动画移动
	$("#pin_cssbox").hover(function(){
		$(this).addClass("hover");
	},function(){
		$(this).removeClass("hover");
	});
	
	//JavaScript控制容器里面的按钮收缩隐藏
	$("#pin-jsbox").mouseenter(function(){
		$(this).find("#zoomr_show").animate({width:"32",height:"32"},100);			   
	}).mouseleave(function(){
		$(this).find("#zoomr_show").animate({width:"0",height:"0"},100);
	});
	
});

</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
.demo{width:700px;margin:40px auto;}
.thead{height:40px;line-height:30px;}
.thead h2{font-size:14px;margin:0 20px;display:inline;color:#3366cc;}

.box{height:315px;width:320px;position:relative;overflow:hidden;border:solid 1px #ddd;float:left;margin:0 10px;display:inline;}
#zoomr_show{

	z-index:9999;position:absolute;display:block;_background:#000;background-image:url(images/zoomr_in.png);cursor:pointer;
	
	-webkit-transition:right .15s ease-in-out,top .15s ease-in-out;
	-moz-transition:right .15s ease-in-out,top .15s ease-in-out;
	-ms-transition:right .15s ease-in-out,top .15s ease-in-out;
	-o-transition:right .15s ease-in-out,top .15s ease-in-out;
	transition:right .15s ease-in-out,top .15s ease-in-out
}
#zoomr_show:hover{background-position:left -32px}
#zoomr_show:active{background-position:left -64px}

#pin_cssbox #zoomr_show{top:-50px;right:-50px;width:32px;height:32px;}
#pin_cssbox.hover #zoomr_show,#pin_cssbox:hover #zoomr_show{top:0;right:0;}

#pin-jsbox #zoomr_show{top:0;right:0;width:0;height:0;}

.box .prevbtn,.box .nextbtn{position:absolute;top:0;width:50%;height:100%;display:block;z-index:100;background:url(spacer.gif);}
.box .prevbtn{cursor:url("images/prev.cur"), auto;left:0;}
.box .nextbtn{cursor:url("images/next.cur"), auto;right:0;}
</style>
<div class="demo">
	
	<div class="thead">
		<h2 style="float:left;">css3 控制查看原图按钮动画收缩隐藏</h2>
		<h2 style="float:right;">jQuery animate控制查看原图按钮动画收缩隐藏</h2>
	</div>
	
	<div class="box" id="pin_cssbox">
		<img src="images/1235.jpg" width="320" height="315" alt="刘诗诗" />
		<a href="#" title="上一篇" class="prevbtn"></a>
		<a href="#" title="上一篇" class="nextbtn"></a>
		<a target="_blank" href="images/2345.jpg" title="查看原图" id="zoomr_show"></a>
	</div>
	
	
	<div class="box" id="pin-jsbox">
		<img src="images/645.jpg" width="320" height="315" alt="刘诗诗" />
		<a href="#" title="上一篇" class="prevbtn"></a>
		<a href="#" title="上一篇" class="nextbtn"></a>
		<a target="_blank" href="images/534.jpg" title="查看原图" id="zoomr_show"></a>
	</div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)