首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

网页放大缩小旋钮效果

2012-10-06 
网页放大缩小按钮效果SCRIPT?!--?var zoomRate 20?var maxRate 500?var minRate 50?var currZ

网页放大缩小按钮效果

<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://www.lanrentuku.com" target="_blank">懒人图库</a></p>

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

热点排行