`
wencan83
  • 浏览: 40655 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

网页放大缩小按钮效果

阅读更多

<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>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics