网页放大缩小按钮效果

2013-10-14 07:07:28 -0400

<SCRIPT>
 <!--
	var zoomRate = 20;
	var maxRate = 500;
	var minRate = 50;
	var currZoom = 100;

//document.onkeypress = getKey;
	//window.onload = initZoom;
	
	function GetCookie(name){
		if (document.cookie != "") {
			zoomc = document.cookie.split("; ");
			for (var i=0; i < zoomc.length; i++) {
                zoomv = zoomc[i].split("="); 
                if (zoomv[0] == name) {
				    return  unescape(zoomv[1]);
                }
			}        
		}else{
			return "";
		}
	}

function zoomInOut(contentid, how) {
		if(GetCookie("zoomVal") != null && GetCookie("zoomVal") != ""){
			document.all[contentid].style.zoom = GetCookie("zoomVal");
			currZoom=GetCookie("zoomVal");
		}
		else{
			document.all[contentid].style.zoom = '100%';

currZoom = '100%';
		}
		if (((how == "in") && (parseInt(currZoom) >= maxRate)) || ((how == "out") && (parseInt(currZoom) <= minRate)) ) {
			return; 
		}
		if (how == "in") {
			document.all[contentid].style.zoom = parseInt(document.all[contentid].style.zoom)+zoomRate+'%';
		}
		else {
			document.all[contentid].style.zoom = parseInt(document.all[contentid].style.zoom)-zoomRate+'%'
		}
		SetCookie("zoomVal",document.all[contentid].style.zoom);
		showCurrZoom(contentid);
	}
	/*
	function getKey(keyStroke) {
		isNetscape=(document.layers);
		eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
		which = String.fromCharCode(eventChooser).toLowerCase();
		which2 = eventChooser;

var el=event.srcElement;

if ((el.tagName != "INPUT") && (el.tagName != "TEXTAREA"))
		{			
			if(which == "+" )
				zoomInOut('zoom', 'in');
			else if(which == "-" )
				zoomInOut('zoom', 'out');
		}
	}*/
	
	function initZoom(contentid) {
		if(GetCookie("zoomVal") != null && GetCookie("zoomVal") != ""){
			document.all[contentid].style.zoom = GetCookie("zoomVal");
			currZoom=GetCookie("zoomVal");
		}
		else{
			document.all[contentid].style.zoom = '100%'; 
			currZoom = '100%';
		}
		showCurrZoom(contentid);
	}
	
	function showCurrZoom(contentid) {
	    document.all['showZoom'].innerText = document.all[contentid].style.zoom;
	}
 //-->
</SCRIPT>

<div id="zoom">
<div style="text-align:center">
  <h4>
  网页手动放大缩小
  </h4>
</div>
<div>
<div style="text-align:center" ><input type="button" value="放大(+)" onclick="zoomInOut('zoom','in')"/>          <span id="showZoom"></span>          <input type="button" value="缩小(-)" onclick="zoomInOut('zoom','out')"/></div><br/><div style="text-align:center"><br/><script type="text/javascript">initZoom("zoom");</script><br/>

</div>
</div>
</div>

代码演示

网页手动放大缩小

«Newer Older»

Back to home

Subscribe | Register | Login | N