<tfoot id="ikk00"></tfoot>

<fieldset id="ikk00"></fieldset>

<ul id="ikk00"></ul>

當前位置：首頁 > JS代碼 > JS特效代碼 > 表單按鈕

網頁放大縮小按鈕效果

2009-07-10　來源/作者：懶人圖庫　分類：表單按鈕　 «»

<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   class="2kiusko"   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/>
<p>查找更多代碼，請訪問：<a href="http://www.cxj168.com" target="_blank">懶人圖庫</a></p>

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

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

標簽：表單按鈕