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

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

<html>
<head>
<title>圖片放大縮小</title>
<script type="text/javascript">
var PhotoSize = {
  zoom: 0, // 縮放率
  count: 0, // 縮放次數(shù)
  cpu: 0, // 當(dāng)前縮放倍數(shù)值
  elem: "", // 圖片節(jié)點
  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; // 設(shè)置基本參數(shù)
    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="查看當(dāng)前倍數(shù)" onclick="alert(PhotoSize.cpu);" /><br />
<img id="focusphoto" src="http://p1.mb5u.com/texiao/1/20110225160615741.jpg" />
</body>
</html>

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

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

相關(guān)圖片特效特效：

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

圖片特效特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索JavaScript控制圖片放大縮小
特效說明：
圖片特效模板-JavaScript控制圖片放大縮小。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

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

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

圖片特效特效推薦

猜你也喜歡看這些