按钮控制窗体内容的放大和缩小

2009-07-15 06:50:31 | 【

点击放大缩小按钮,浏览器内的所有内容都会放大或缩小,包含所有文字、图片,非常不错,用于给弱视全体的网站很有用

查看演示页面 View Demo 查看全部代码 View Code

在网页<body>区添加以下代码

<SCRIPT>

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序,请保留此声明
         * 获取此脚本以及更多的JavaScript程序,请访问 http://www.ShareJS.com
         ******************************************************/
    
 <!--
	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" >
<Br>
<a href="http://www.sharejs.com"><img src="http://www.sharejs.com/images/logo.gif" border="0"></a>
<Br>
<br>
<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/>

下载"按钮控制窗体内容的放大和缩小"

  • 本地下载
  • 本地下载2

相关资源