分享编程~
 

鼠标碰触图片放大CSS3与JS分别展示方法

鼠标碰触图片放大CSS3实现方法与JS实现方法展示对比。

天天特卖抢好货

鼠标碰触图片放大CSS3实现方法与JS实现方法展示对比。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>鼠标碰触图片放大CSS3与JS分别展示方法-越加网</title>
	<meta name="keywords" content="鼠标碰触图片放大CSS3与JS分别展示方法">
	<meta name="description" content="鼠标碰触图片放大CSS3实现方法与JS实现方法展示对比。">
	
</head>
<body>
	<!--一、css3属性(兼容IE9以上)-->
	<br>
	<p>方法一(css3)</p>
	<br>
	<style>
		.a{overflow:hidden;}
		.b{float:left;overflow:hidden;width:200px;height:200px;margin-right:10px;border:1px solid red;position:relative;}
		.b img{width:200px;height:200px;}
		.b img{transition:transform 0.5s;-webkit-transition:transform 0.5s;}
		.b:hover img{transform:scale(1.3);-webkit-transform:scale(1.3);}
		.b .txt{transition:transform 0.5s;-webkit-transition:transform 0.5s;}
		.b:hover .txt{transform:scale(1.3);-webkit-transform:scale(1.3);}
		.b:hover .txts{color:blue}
		.txt{position:absolute;width:200px;height:200px;top:0;left:0; display:table;  text-align:center; }
		.txts{vertical-align:middle;  display:table-cell;   color:red}
	</style>
	<div class="a">
		<div class="b">
			<img src="http://img15.3lian.com/2015/f1/190/d/21.jpg" >
			<div class="txt"><div class="txts">美丽的景色是来自百度线上图片</div></div>
		</div>
		<div class="b">
			<img src="http://img15.3lian.com/2015/f1/190/d/22.jpg" >
			<div class="txt"><div class="txts">美丽的景色</div></div>
		</div>
		<div class="b">
			<img src="http://img15.3lian.com/2015/f1/190/d/16.jpg" >
			<div class="txt"><div class="txts">美丽的景色</div></div>
		</div>
		<div class="b">
			<img src="http://img15.3lian.com/2015/f1/190/d/18.jpg" >
			<div class="txt"><div class="txts">美丽的景色</div></div>
		</div>
	</div>
	
	<!--2 jquery -->
	<br>
	<p>方法二(jquery)</p>
	<br>
	
	<style>
		.c{overflow:hidden;}
		.d{float:left;overflow:hidden;width:200px;height:200px;margin-right:10px;border:1px solid red;position:relative;}
		.e{width:200px;height:200px;}
		.d img{width:200px;height:200px;}
		.d:hover .txts{color:blue}
		.txt{position:absolute;width:200px;height:200px;top:0;left:0; display:table;  text-align:center; }
		.txts{vertical-align:middle;  display:table-cell;   color:red}
	</style>
	<div class="c">
		<div class="d">
			<div class="e">
				<img src="http://img15.3lian.com/2015/f1/190/d/21.jpg">
			</div>
			<div class="txt"><div class="txts">美丽的景色</div></div>
		</div>
		<div class="d">
			<div class="e">
				<img src="http://img15.3lian.com/2015/f1/190/d/22.jpg">
			</div>
			<div class="txt"><div class="txts">美丽的景色</div></div>
		</div>
		<div class="d">
			<div class="e">
				<img src="http://img15.3lian.com/2015/f1/190/d/16.jpg" >
			</div>
			<div class="txt"><div class="txts">美丽的景色</div></div>
		</div>
		<div class="d">
			<div class="e">
				<img src="http://img15.3lian.com/2015/f1/190/d/18.jpg" >
			</div>
			<div class="txt"><div class="txts">美丽的景色</div></div>
		</div>
	</div>
	<script charset="utf-8" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
	<script>
	$(function(){
		$(".d").mouseenter(function () {
			$(this).find("img").stop().animate({width:"300px",height:"300px"},500);
			$(this).find(".e").stop().animate({margin:"-50px 0 0 -50px"},500);
		});
		$(".d").mouseleave(function(){
			$(this).find("img").stop().animate({width:"200px",height:"200px"},500);
			$(this).find(".e").stop().animate({margin:"0"},500);
		});
	});
	
	</script>
</body>
</html>


上一篇:web客服QQ在线咨询临时会话下一篇:PS多个图层上下左右居中对齐简单方法
赞(0) 踩(0)
您说多少就多少,您的支持是我最大的动力
赏金
微 信
赏金
支付宝
本文连接: https://www.yj521.com/article/79.html
版权声明: 本文为原创文章,版权归《越加网》所有,分享转载请注明出处!