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

最新推荐文章于 2022-05-16 15:00:41 发布

xjwolaile

最新推荐文章于 2022-05-16 15:00:41 发布

阅读量245

点赞数

分类专栏：学习前端技术 jQuery 文章标签： addClass removeClass mouseenter find animate

本文链接：https://blog.csdn.net/xjwolaile/article/details/84460139

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

jQuery

63 篇文章 0 订阅

订阅专栏

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、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/1388/89498098-6853-3b06-a9bc-70ffb81d001b.jpg[/img]

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>

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery animate或css3制作查看原图按钮收缩隐藏-20130718

1、效果及功能说明制作两种查看原图按钮收缩展开，隐藏关闭2、实现原理定义好伪类让后让伪类来控制显示原图片的标志出现和隐藏，通过css来定义图标出现的位置和多少时间内完成动画的效果，在分别定义鼠标在图片的左右变成左右箭头的鼠标告诉用户往那边滚动主要的方法 [code="html5"]$("#pin-jsbox").mouseenter(function...
复制链接

扫一扫

专栏目录