网页放大缩小按钮效果代码,JS代码库,德仔网

代码语言

代码分类

【JS】网页放大缩小按钮效果

作者:Dezai.CN / 发布于2013/9/25/ 523


	<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 SetCookie(name,value){
	 document.cookie = name + "=" + escape (value)+";";
	}
	
	/*function GoZoom(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%';
	 }
	}*/

	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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　网页放大缩小　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)