`

js控制浏览器放大或者缩小

阅读更多
问题一:
  希望改变当前页面所在的浏览器窗口的大小
  解决方案:
  使用window对象的方法:resizeTo()和resizeBy()。比如:
    window.resizeTo(800, 600); // 将窗口大小调整为宽800,高600,单位为像素
    window.resizeBy(50, 50);   // 调整窗口大小,在当前基础上,宽和高各增加50
    window.resizeBy(50, 0);   // 调整窗口大小,在当前基础上,只将宽增加50
    window.resizeBy(-50, -50); // 调整窗口大小,在当前基础上,宽和高各减少50
  问题二:
  上面提到了,resizeTo()和resizeBy()方法不能改变窗口左上角的位置,但有时的确有这种需求,比如最大化窗口。
解决方案:
  使用moveTo()方法将浏览器窗口移动到屏幕的指定坐标位置:
moveTo(100, 100); // 将左上角移至(100, 100)点
    使用moveBy()方法将浏览器窗口在当前位置基础上移动一个相对偏移量:
moveBy(50, 50); // 将窗口向右和向下各移动50个像素
    两个函数的定义为:
window.moveTo(x, y); // x, y 为新位置的两个坐标值
    window.moveBy(dx, dy); // dx, dy 是相对偏移的值
  现在能够改变窗口的大小,也能改变窗口的位置了,如果两者结合起来就能做更多事情,比如最大化窗口。看下面这个函数:
    function maximizeWindow()
{
var offset = (navigator.userAgent.indexOf("Mac") != -1 || navigator.userAgent.indexOf("Gecko") != -1 ||
navigator.appName.indexOf("Netscape") != -1) ? 0 : 4;
window.moveTo(-offset, -offset);
window.resizeTo(screen.availWidth + (2 * offset), screen.availHeight + (2 * offset));
}
  该函数能让窗口占据整个屏幕,看起来确实是最大化了,事实却不是这样,不信请查看窗口的最大化按钮。脚本首先为Windows设置了一个额外的偏移量4 (原因看后面),然后再调整窗口的位置和大小,模拟一种最大化的效果。其中screen对象的availWidth和availHeight属性分别表示屏幕的可用宽度和高度(单位为像素),注意它们不包括任务栏的尺寸。
  最大化和最小化的概念主要出现在Windows操作系统中,与Macintosh中的窗口就不一样(下次去电脑城,得仔细体验一下有何不同)。也许我们能够模拟一个最大化窗口,但对于不同的浏览器总有些局限性。首先,在Windows中一个真正最大化的窗口左上角的坐标是(-4, -4)而不是(0, 0),这样能将4像素宽的窗口边沿隐藏掉,这也是上面脚本中出现4的原因,而Macintosh则允许窗口细长的边沿总是可见;另外还与浏览器有关系,比如FireFox根本就不允许将窗口移至(-4, -4)这个点。
  仅仅通过脚本不能使窗口真正地最大化或最小化。但试试下面这段脚本(只在IE下有效),也许会给你一点惊喜:)
<OBJECT id="min" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Minimize">
</OBJECT>
<button onclick="min.Click()"><font face="webdings">0</font></button>
<OBJECT id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Maximize">
</OBJECT>
<button onclick="max.Click()"><font face="webdings">1</font></button>
<OBJECT id="clo" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Close">
</OBJECT>
<button onclick="clo.Click()"><font face="webdings">r</font></button>

出自 http://tech.sina.com.cn/s/2008-06-27/0941710872.shtml
0
0
分享到:
评论

相关推荐

    手机浏览器放大、缩小图片插件

    【标题】"手机浏览器放大、缩小图片插件"所涉及的知识点主要集中在移动Web开发领域,特别是关于触摸事件处理和图像操作技术。这个插件专为H5(HTML5)页面设计,目的是为了提供在手机浏览器中对图片的便捷操作,如...

    js动态的获取浏览器页面放大缩小的比例.pdf

    在JavaScript中,动态获取浏览器页面放大缩小的比例是一个常见的需求,特别是在进行响应式设计或精确的图形渲染时。这个过程涉及到浏览器窗口的尺寸变化监听、设备像素比(devicePixelRatio)的检测以及对不同浏览器...

    js控制图片放大、缩小、按比例显示

    在JavaScript(JS)编程中,控制图片的放大、缩小以及按照比例显示是常见的需求,尤其在网页设计和交互效果中。下面将详细讲解如何利用JavaScript实现这些功能。 1. **图片放大与缩小** - **鼠标滚动事件**:在...

    根据浏览器大小使网页内容自动放大缩小

    ### 根据浏览器大小使网页内容自动放大缩小 在现代网页设计中,为了提供更好的用户体验,网站需要能够自适应不同的屏幕尺寸。这不仅涉及到布局的变化,还包括文本、图片等元素的大小调整。本文将深入探讨一种利用...

    浏览器窗口放大缩小后页面内容居中解决方法

    综上所述,要实现浏览器窗口放大缩小后页面内容居中,需要结合CSS布局技术,如Flexbox或Grid,以及JavaScript和jQuery的事件监听和动态计算。同时,响应式设计和性能优化也是不可忽视的环节。实际操作时,根据项目...

    【重要】js页面整体放大缩小兼容所有浏览器(ie及firefox等).html

    页面放大缩小代码,兼容所有浏览器,代码简单,易学易用。

    pdf文件实现放大缩小功能

    例如,Adobe提供了一个开源的PDF库叫做PDFLib,还有其他如PDF.js(JavaScript库)、QPDF、Poppler等。在这个例子中,我们可能会用到名为"ZoomingPDFViewer"的项目,它可能是为实现PDF放大缩小功能而设计的一个特定...

    浏览器窗口放大缩小后页面内容居中解决方法(qqyangwang)

    "浏览器窗口放大缩小后页面内容居中解决方法"这一主题,主要涉及JavaScript(js)和jQuery库的使用,以实现动态响应式布局。下面我们将详细探讨如何实现这一目标。 首先,让我们理解窗口的resize事件。当用户调整...

    js控制图片放大缩小

    在网页设计中,JavaScript是一...综上所述,实现“js控制图片放大缩小”的功能涉及到DOM操作、事件监听、CSS属性修改等多个方面,通过合理的编程技巧和优化策略,我们可以创建一个功能丰富且用户体验良好的图片查看器。

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

    在JavaScript(JS)和HTML的结合使用中,可以创建丰富的用户体验,例如图片的放大、缩小、旋转和拖动查看功能。这些动态效果是现代网页设计中常见且实用的技术,能够增强用户与网页内容的交互性。下面将详细介绍如何...

    flex实现图片浏览、放大、缩小、复位

    flex实现图片浏览、放大、缩小、复位、第一张、下一张、上一张和最后一张功能。并能结合jsp、js实现动态效果

    viewer.js图片放大缩小使用的js

    `viewer.js`库基于ECMAScript,因此它兼容现代浏览器,同时也考虑到了对旧版本JavaScript的支持。它的核心特性包括: 1. **响应式设计**:`viewer.js`能够自动适应不同的设备和屏幕尺寸,确保在手机、平板和桌面...

    Pinchzoom.js插件实现手指触摸图片放大缩小

    Pinchzoom.js 是一个轻量级的JavaScript插件,专门用于处理这种手势交互,使图片在触摸屏设备上能够轻松地进行放大和缩小操作。下面我们将详细介绍Pinchzoom.js的工作原理、使用方法以及如何集成到项目中。 1. **...

    浏览器缩小放大 的控制

    标题“浏览器缩小放大 的控制”主要关注的是浏览器如何处理页面缩放操作。在网页设计中,缩放可能导致元素尺寸、位置以及相对关系发生改变,因此开发者需要考虑到这些变化,以确保页面在不同缩放比例下仍能正确显示...

    js放大缩小拖拽图片(兼容IE、火狐)

    ### js放大缩小拖拽图片(兼容IE、火狐) #### 概述 本文将详细介绍一个JavaScript脚本,该脚本可以实现图片的放大、缩小以及拖拽功能,并且能够兼容Internet Explorer (IE) 和 Firefox 浏览器。通过这个脚本,...

    js图片 放大 缩小 移动 鹰眼

    在JavaScript(JS)中处理图片放大、缩小和移动的功能,通常涉及到HTML5的Canvas元素以及鼠标事件处理。在这个场景下,用户希望实现鼠标滚轮滚动来控制图片的放大和缩小,而原有的功能是通过组合键(Shift + 鼠标...

    超强js 图片查看器 放大 缩小 左右反转

    本文将详细探讨如何使用JavaScript实现一个强大的图片查看器,具备放大、缩小、左右反转等功能。 首先,我们需要理解JavaScript(JS)是Web开发中的主要脚本语言,用于增强网页的动态功能。在创建图片查看器时,...

    利用javascript实现图片动态的放大和缩小

    图片放大缩小 img { width: 100px; /* 初始化图片大小 */ cursor: zoom-in; /* 添加放大效果的光标 */ } 示例图片"&gt; &lt;script src="expandimg.js"&gt; ``` 在这个HTML文件中,我们用`&lt;img&gt;`标签展示了...

    jquery 控制鼠标滑轮 放大缩小图片

    本文将深入探讨如何使用 jQuery 和一个特定的插件 `jquery.mousewheel.min.js` 来实现通过鼠标滚轮控制图片的放大和缩小功能。 首先,我们需要了解 `jquery.mousewheel.min.js` 插件的作用。这个插件扩展了 jQuery...

    用JS实现和google地图类似的图片查看器-----放大、缩小、移动和还原,都控制在div里,兼容ie,FF

    可以添加控制按钮或者热区,用户通过点击按钮或拖动滑块来实现放大、缩小等操作,提高用户体验。 10. **拖放功能**: 对于现代浏览器,可以使用HTML5的拖放API,允许用户直接从本地文件系统拖放图片到查看器。 ...

Global site tag (gtag.js) - Google Analytics