jQuery animate或css3制作查看原图按钮收缩隐藏-20130718

程序员文章站 2022-07-12 21:31:56

...

1、效果及功能说明

制作两种查看原图按钮收缩展开，隐藏关闭

2、实现原理

定义好伪类让后让伪类来控制显示原图片的标志出现和隐藏，通过css来定义图标出现的位置和多少时间内完成动画的效果，在分别定义鼠标在图片的左右变成左右箭头的鼠标告诉用户往那边滚动

主要的方法

$("#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);
//当鼠标离开图片后显示原图的标志消失

3、效果图

jQuery animate或css3制作查看原图按钮收缩隐藏-20130718

博客分类：学习前端技术jQuery addClassremoveClassmouseenterfindanimate

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	
	$("#pin_cssbox").hover(function(){
	//定义一个伪类
		$(this).addClass("hover");
		//控制容器添加hover
	},function(){
		$(this).removeClass("hover");
		//控制容器移除hover，通过css3控制按钮动画移动
	});
	
	
	$("#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(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("http://www.17sucai.com/static/images/prev.cur"), auto;left:0;}
.box .nextbtn{cursor:url("http://www.17sucai.com/static/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="http://www.17sucai.com/" title="上一篇" class="prevbtn"></a>
		<a href="http://www.17sucai.com/" 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="http://www.17sucai.com/" title="上一篇" class="prevbtn"></a>
		<a href="http://www.17sucai.com/" title="上一篇" class="nextbtn"></a>
		<a target="_blank" href="images/534.jpg" title="查看原图" id="zoomr_show"></a>
	</div>
	
</div>

</body>
</html>