给网页添加放大缩小功能按钮-网页特效-懒人建站

给网页添加放大缩小功能按钮

此功能可以放大网页和缩小网页，特别适合老人等视力不好的人群。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>只允许输入汉字的输入框JS代码-懒人建站-解放出你的部分写代码时间来思考更高层次的设计</title>

<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>
</head>
<body>

<div id="zoom">
<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 style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理 我要学电脑.COM →51xuediannao.com</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>我们为您提供-
<a href="http://www.51xuediannao.com/html+css/">HTML+CSS模板</a>，
<a href="http://www.51xuediannao.com/js/">JS代码</a>，
<a href="http://www.51xuediannao.com/JS/texiao/">网页特效</a>，
<a href="http://www.51xuediannao.com/JS/nav/">导航菜单</a>，
<a href="http://www.51xuediannao.com/JS/Slide/">焦点幻灯片<a>，
<a href="http://www.51xuediannao.com/JS/show/">网页欣赏</a>和
<a href="http://www.51xuediannao.com/JS/jiqiao/css/">CSS技巧</a>；</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>
</body>
</html>

代码说明:

想不想给你网页也添加上放大缩小功能按钮那？此功能可以放大网页和缩小网页，特别适合老人等视力不好的人群。

TAG标签

弹出层 jQuery 图片展示下拉菜单左右滚动选项卡二级导航 jQuery弹出层

来源：懒人建站|发布人：懒人建站|2010-02-26|热度：次|收藏|报错

相关文章 用户控制页面字号逐级放大缩小JS代码