網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>圖片特效特效代碼>

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

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

<html>
<head>
<title>圖片放大縮小</title>
<script type="text/javascript">
var PhotoSize = {
  zoom: 0, // 縮放率
  count: 0, // 縮放次數(shù)
  cpu: 0, // 當(dāng)前縮放倍數(shù)值
  elem: "", // 圖片節(jié)點(diǎn)
  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); // 任意次冪運(yùn)算
    };
    this.elem.style.width = this.photoWidth * this.cpu +"px";
    this.elem.style.height = this.photoHeight * this.cpu +"px";
  }
};
// 啟動(dòng)放大縮小效果,用onload方式加載，防止第一次點(diǎn)擊獲取不到圖片的寬高
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>

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

[收藏][報(bào)錯(cuò)][返回列表]

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

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

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

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

圖片特效特效推薦

猜你也喜歡看這些