web前端 图片缩放特效

web前端 图片缩放特效

如下图：

当鼠标进入div框内；图片发生放大或缩小

代码：

<div>
 <ul class="div-tupian-ul">
	
 
    <li><img src="http://f10.baidu.com/it/u=247176219,1089816087&fm=76" width="159" height="117" alt="颈椎引起的眩晕" /></li>

 
 
</ul>
</div>
<div>
 <ul class="div-tupian-ul">
	
 
    <li><img src="http://f10.baidu.com/it/u=247176219,1089816087&fm=76" width="159" height="117" alt="颈椎引起的眩晕" /></li>

 
</ul>
</div>

css样式：

<style>
.div-tupian-ul li{
	float:left;
border: #F00 solid 2px;
	width:159px; height:117px;
	 overflow:hidden;   cursor:pointer;
margin:10px;
			}
.div-tupian-ul li img{
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
	-webkit-transition:all 2s ease;
	-moz-transition:all 2s ease;
	-o-transition:all 2s ease;
	transition:all 2s ease;}

.div-tupian-ul li:hover img{-webkit-transform:scale(1.15);
-moz-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;



}

</style>