`
wencan83
  • 浏览: 42196 次
  • 性别: 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>

分享到:
评论

相关推荐

    网页放大缩小按钮效果.rar

    网页放大缩小按钮效果是网页设计中的一个重要组成部分,它允许用户根据个人需求调整页面的缩放比例,以获得最佳的浏览体验。在JavaScript(JS)特效领域,这种功能通常通过编写自定义代码或利用内置浏览器API来实现...

    webBrowser 网页放大缩小

    3. **网页放大缩小实现** WebBrowser控件没有内置的缩放功能,但可以通过操作网页的DOM(文档对象模型)来实现。我们可以通过调用`DocumentText`属性获取或设置当前页面的HTML源码,然后修改`&lt;body&gt;`标签中的`style...

    flash圆形按钮放大缩小跳动效果_flash圆形旋转动画按钮

    在本文中,我们将深入探讨如何在Flash中创建一个具有放大缩小和跳动效果的圆形按钮,同时结合圆形旋转动画,为用户带来动态且引人注目的交互体验。这个主题主要涉及两个关键知识点:Flash的图形动画和交互式按钮制作...

    实现放大缩小按钮的效果源码.zip

    在提供的"实现放大缩小按钮的效果源码.zip"压缩包中,我们可以看到一个名为"ch05_button"的文件,它可能包含了一个简单的Android项目,用于演示这个功能。下面将详细讲解如何实现这种交互效果。 首先,我们创建一个...

    js仿百度地图放大缩小拖拽查看效果

    点击缩小按钮时,比例尺除以这个因子。然后,根据新的比例尺重新加载地图切片,并更新所有可视区域的坐标。在现代Web开发中,CSS3的`transform: scale()`属性可以用来改变元素的大小,配合JavaScript事件监听,可以...

    通过按钮实现 图片 放大 缩小

    通过点击按钮 放大 缩小 实现图片的放大和缩小

    QT图片放大缩小

    接着,我们会在设计视图(Design View)中添加一个QLabel和两个QPushButton,分别用于显示图片和控制放大缩小。一个按钮用于放大图片,另一个用于缩小图片。 对于QLabel,我们可以使用`setPixmap()`函数来设置其...

    jQuery支持图片放大缩小查看效果

    那么你可以将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果 使用方法: 1、将head中的css样式引入到你的网页中 2、将代码部分拷贝到你的网页body结束前的地方即可

    css3图片放大缩小切换幻灯片效果

    在本文中,我们将深入探讨如何使用CSS3和JavaScript来创建一个图片放大缩小切换的幻灯片效果。这种效果能够提供一种动态且流畅的用户体验,尤其适用于网站中的展示区域或者产品介绍部分。在火狐浏览器中,它还能实现...

    axure7实现图片放大/缩小渐变效果

    通过使用动态模板背景图片来实现图片放大/缩小渐变效果 1.在主界面放置一个动态面板“big”,两个按钮(“放大” “缩小”) 2.在“big”里面放置一个动态面板“small” 3.将small的背景设置成图片,并在“重复”...

    c# 用滚轮、单击按钮事件实现图片放大缩小移动

    在C#编程中,图像处理是一项常见的任务,其中包括图片的放大、缩小以及移动等操作。在Windows Forms或WPF应用程序中,我们可以利用控件和事件来实现这些功能。本篇文章将详细讲解如何利用滚轮事件、单击按钮事件来...

    易语言图片放大缩小例程

    本文将深入探讨“易语言图片放大缩小例程”,包括源码解析、图片处理原理以及如何在易语言中实现显示和移动图片。 在易语言中,处理图片放大缩小的关键在于理解图像处理的基本概念和技术。首先,我们需要了解位图和...

    JS+Html图片放大缩小旋转拖动效果

    然后,通过JavaScript来改变图片的大小,实现放大和缩小效果。这可以通过修改图片的`style.width`和`style.height`属性来完成。还可以使用CSS的`transform-origin`属性来控制缩放的中心点。 2. **图片放大**:当...

    pdf文件实现放大缩小功能

    在这个例子中,我们可能会用到名为"ZoomingPDFViewer"的项目,它可能是为实现PDF放大缩小功能而设计的一个特定组件或框架。 2. 图形渲染:PDF文件由多个页面组成,每个页面包含图形、文本和其他元素。在放大或缩小...

    圆形按钮放大缩小跳动flash效果.rar

    圆形按钮放大缩小跳动flash效果.rar

    pdf绘制实现放大缩小

    在PDF绘制实现放大缩小的过程中,首先需要理解PDF的基本结构。PDF文件包含了一系列的页面对象,每个页面对象都有其尺寸和坐标系统。在显示PDF时,这些页面会被映射到屏幕上的像素,这涉及到一种叫做“设备无关图形”...

    JQuery点击放大缩小图片并可左右滑动

    "JQuery点击放大缩小图片并可左右滑动"这个功能就是一个典型的例子,它使得用户可以更方便地查看和浏览网页中的图片,同时也增加了页面的互动性和视觉吸引力。 JQuery是一个广泛使用的JavaScript库,它简化了DOM...

    实现放大缩小按钮的效果

    以上就是实现放大缩小按钮效果的基本思路和关键知识点。这个功能结合了自定义View、触摸事件处理、动画以及边界检测等多个Android UI开发的重要元素。通过研究提供的`code`文件,你可以更深入地理解这些概念并应用于...

    百度地图,可定位搜索,自定义放大缩小按钮

    "百度地图,可定位搜索,自定义放大缩小按钮"这个主题聚焦于百度地图API的使用,特别是其核心功能——定位、搜索以及界面交互的自定义。下面我们将深入探讨这些知识点。 首先,**定位搜索**是地图服务的基础功能。...

Global site tag (gtag.js) - Google Analytics