js 添加图片缩放按钮

  • 内容
  • 评论
  • 相关
<?php
header("Content-type: text/html; charset=utf-8");
?>
<html>
	<head>
		<title>路网图</title>
		<script type="text/javascript" src="jquery.js"></script>
		<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();PhotoSize.action(-8);};
// 			$(document).ready(function(){
// 				$("#min").trigger('click');
// 			}); 
		</script> 
	</head>
	<body>
		<input type="button" value="放大" onclick="PhotoSize.action(1);" /> 
		<input type="button" id="min" value="缩小" onclick="PhotoSize.action(-1);" /> 
		<input type="button" value="还原大小" onclick="PhotoSize.action(0);" /> 
		<div style="text-align:center"><img id="focusphoto" src="image.jpg" /></div>
	</body>
</html>

评论

0条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注