鼠标碰触图片放大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>
