恩恩，看了妳的這個預期效果！這是我的代碼，妳可以看看，可以實現這個效果：
<!DOCTYPE?html><html>
<head?lang="en">
<meta?charset="UTF-8">
<title>AlloyTeanm-zy</title>
<script?src="jquery-1.11.1.js"></script>
<style?type="text/css">
body{
font-family:?simhei;
overflow:?hidden;
}
#div1{
overflow:hidden;
}
#pic{
position:?relative;
overflow:?hidden;
}
</style>
<script?type="text/javascript">
$(document).ready(function(){
$("#pic").load(function()?{
$("#pic").animate({width:'1520px',height:'700px',top:'-10px',left:'-5px',bottom:'0px',right:'-10px'},8000);
})
})
</script>
</head>
<body>
<div?style="width:?1600px?;height:?700px"?>
<img?src="05.jpg"?id="pic"?style="width:?1700px;height:?800px;top:-100px;left:?-100px">
</div>
</body>
</html> 需要註意的幾點：
1.我用的是jQuery，需要引入外部jQuery庫！ <script src="jquery-1.11.1.js"></script> 2.圖片的原始大小，以及屏幕的大小都會影響這個效果！ 3.這些top屬性和left屬性，都是根據我的圖片和屏幕調的，具體的值，妳要根據自己的情況更改，反正原理就這樣！原理是，將圖片的長度和寬度調的比屏幕窗口或者DIV大，也就是讓圖片“溢”出來，多的部分使用“overflow：hidden”隱藏掉，然後在讓圖片他恢復和窗口或者DIV壹樣大尺寸，就會產生圖片拉遠的效果！ 有不懂的地方繼續問我！ 希望能幫助到妳，望采納！