【代码教程】网页放大缩小按钮效果html代码
2013-08-24 10:31:15 -0400
[代码教程]网页放大缩小html代码
网放大缩小按钮html代码
返回主站
360杀毒通过
✎请勿抄袭本页面,可以复制框内代码
代码说明如下
代码名：网页放大缩小html代码
类型：html
来自：互联网
代码说明：您可以复制以下框内的代码粘贴到您须要的地方!将下方框内代码加入你的网站须要这种功能的地方!
html代码如下框内
<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/> <p>查找更多代码，请访问：<a href="http://aibeyond.wodemo.com" target="_blank">土豆的磨</a></p> </div> </div> </div>
代码效果演示
网页手动放大缩小
查找更多代码，请访问：
土豆的磨