JavaScript控制圖片放大縮小_圖片特效特效

JavaScript代碼實現對圖片放大、縮小的控制，當點擊放大的時候，圖片會放大，點縮小則變小，連續點擊則不斷的放大，也可清除還原。這項功能是通過 Math.pow(x,y) 的“冪”運算來計算大小圖片放大縮小的尺寸。

<html>
<head>
<title>圖片放大縮小</title>
<script type="text/javascript">
var PhotoSize = {
  zoom: 0, // 縮放率
  count: 0, // 縮放次數
  cpu: 0, // 當前縮放倍數值
  elem: "", // 圖片節點
  photoWidth: 0, // 圖片初始寬度記錄
  photoHeight: 0, // 圖片初始高度記錄
  
  init: function(){
    this.elem = document.getElementById("focusphoto");
    this.photoWidth = this.elem.scrollWidth;
    this.photoHeight = this.elem.scrollHeight;
    
    this.zoom = 1.2; // 設置基本參數
    this.count = 0;
    this.cpu = 1;
  },
  
  action: function(x){
    if(x === 0){
      this.cpu = 1;
      this.count = 0;
    }else{
      this.count += x; // 添加記錄
      this.cpu = Math.pow(this.zoom, this.count); // 任意次冪運算
    };
    this.elem.style.width = this.photoWidth * this.cpu +"px";
    this.elem.style.height = this.photoHeight * this.cpu +"px";
  }
};
// 啟動放大縮小效果,用onload方式加載，防止第一次點擊獲取不到圖片的寬高
window.onload = function(){PhotoSize.init()};
</script>
</head>
<body>
<input type="button" value="放大" onclick="PhotoSize.action(1);" /> <input type="button" value="縮小" onclick="PhotoSize.action(-1);" /> <input type="button" value="還原大小" onclick="PhotoSize.action(0);" /> <input type="button" value="查看當前倍數" onclick="alert(PhotoSize.cpu);" /><br />
<img id="focusphoto" src="http://p1.mb5u.com/texiao/1/20110225160615741.jpg" />
</body>
</html>

所屬頻道：圖片特效特效/更新時間：2012-11-03

[收藏][報錯][返回列表]

相關圖片特效特效：

JavaScript控制圖片放大縮小_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些