jQuery animate或css3打造查看原图按钮收缩隐藏-20130718-HTML教程-爱易网页

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

日期：2014-05-16　浏览次数：20644 次

jQuery animate或css3制作查看原图按钮收缩隐藏-20130718
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、效果图

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://w

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>