<!doctype html>
<html>
<head>
<style> img{display:block;} .box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;} .box img{width:200px;height:160px;position:relative;} </style>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>jq鼠標通過圖片放大效果</title>
</head>
<body>
<div class="box"><img src="焦點圖/images/120617_pic1.jpg"></div>
<script> $(".box").mouseenter(function(){ $(this).children("img").animate({width:"200%",height:"200%",marginTop:"-50%",marginLeft:"-50%"}) }).mouseleave(function(){ $(this).children("img").animate({width:"100%",height:"100%",marginTop:0,marginLeft:0}) }) </script>
</body>
</html>
<!doctype html>
<html>
<head>
<style> img{display:block;} .box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;} .box img{width:200px;height:160px;position:relative; transition:all 2s;} .box:hover img{-webkit-transform:scale(1.5,1.5);} </style>
<meta charset="utf-8">
<title>css鼠標通過圖片放大效果</title>
</head>
<body>
<div class="box"><img src="焦點圖/images/120617_pic1.jpg"></div>
</body>
</html>