在所有浏览器中使用javascript ZoomIn和zoomOut元素
在所有浏览器中使用JavaScript ZoomIn和ZoomOut元素，可以通过修改元素的样式属性来实现缩放效果。具体实现方法如下：
- ZoomIn元素：
- ZoomOut元素：
注意：以上答案仅供参考，具体的实现方式可能因具体业务需求和技术选型而有所不同。
相关·内容
1回答
我想使用地图外的自定义缩放按钮来节省移动屏幕的空间。我试过了，但是按钮不起作用：
HTML：
<button type='button' id='zoomIn'>Zoom in</button>
<button type='button' id='zoomOut'>Zoom out</button>
Javascript：
function zoomIn() {
map.setZoom(map.getZoom() + 1);
}
function zoomOut() {
map.s
浏览 1提问于2017-08-13得票数 0
回答已采纳
我以编程的方式制作了几个按钮，并试图为每个按钮设置一个操作，但我似乎无法让它工作。
在我的AppController.h中有这样的代码：
...
IBOutlet NSButton* btnZoomIn;
IBOutlet NSButton* btnZoomOut;
...
和
- (IBAction) zoomIn : (id) sender;
- (IBAction) zoomOut : (id) sender;
在awakeFromNib方法中的AppController.m中：
/*zoom in and out buttons*/
//get the path to the i
浏览 0提问于2011-09-10得票数 10
我想使用下面的代码进行ZoomIn和以后的ZoomOut，但是它不起作用。
public void ZoomIn()
{
new Actions(driver)
.SendKeys(Keys.Control).SendKeys(Keys.Add)
.Perform();
}
public void ZoomOut()
{
new Actions(driver)
.SendKeys(Keys.Control).SendKeys(Keys.Subtract)
.Perform();
}
还有别的路吗--请引导我。谢谢
浏览 2提问于2017-06-23得票数 1
回答已采纳
在移动web小浏览器中，window对象似乎毫无意义--因为只有一个窗口可供显示。因此，像window.pageYOffset=320这样的东西没有任何意义(据我所知)。
给出一个简单的示例，例如地图放大/缩小
<html>
<head>
<title>zoom.html</title>
<script language="javascript">
var zoom=15;
var vpos=window.pageYOffset;
var key="whatever-your-Google-Maps-site-
浏览 0提问于2010-01-08得票数 0
回答已采纳
1回答
铸造匿名函数参数
、、、
我在function内部有一个函数(使用类型记录)，其中容器组件将变量传递给子组件。变量是函数。然而，当我传递这些信息时，我会得到"noImplicitAny“错误。zoomIn和zoomOut是函数，rest似乎是一个数组。如何将类型分配给zoomIn、zoomOut和...rest？
<TransformWrapper>
{({ zoomIn, zoomOut, ...rest }) => (
<TransformComponent>
<Something onClick={zoomIn} />
<
浏览 2提问于2020-03-11得票数 0
回答已采纳
有没有办法在安卓系统中不断地放大和缩小ImageView？我尝试使用下面的代码，但是只有一个Zoom函数在工作。
zoomin.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
xmlns:android="http
浏览 6提问于2013-08-14得票数 16
回答已采纳
我有一些Jquery，它可以不停地放大和缩小横幅图像。当我运行此命令时，浏览器中出现堆栈限制错误。它仍然在运行，但有没有办法让它只“及时”加载到堆栈中？当查看堆栈时，它在初始加载时一次又一次地加载zoomIn()和zoomOut()，直到达到限制，因此页面加载非常慢。
$(document).ready(function(){
$bannerImg = $('.post-picture img')
function zoomIn(){
$bannerImg.animate({
width: 1500,
浏览 0提问于2013-05-10得票数 0
回答已采纳
1回答
创建此图标页时遇到困难。基本上，我希望图标排列在彼此附近，所以基本上是这样的…
自定义图标铅笔自定义图标时钟铅笔的图标时钟的图标
<div>
<!-- Icon Button - pencil -->
Custom Icon - pencil <br />
<div id="pencil">pencil</div>
</div>
<div>
<!-- Icon Button - clock -->
Custom Icon - clock &l
浏览 1提问于2013-04-03得票数 0
4回答
我相信每个人在开发过程中都会犯错误，并在发布后才意识到这一点。嗯，我也遇到了同样的问题，除了这个问题存在于Enum选项中。
我有一个枚举定义，如下所示，在C#中
public enum SlideShowZoomEffect
{
NoEffect,
ZoomIn,
ZoonOut
}
最近，在产品发布后，我们意识到ZoonOut有一个错误(应该是ZoomOut)。我们想要更改它，但是它作为字符串保存到数据库中(因此它被保存为ZoonOut)，程序将通过调用enum.parse(.)来重建枚举。这让我们可以在我们的程序中使用
浏览 0提问于2015-06-10得票数 4
回答已采纳
我正在使用来自的jQuery SVG插件，并且有一个奇怪的问题。
插件包非常好，支持简单的代码。然而，当我实现缩放和移动功能时，代码只适用于一台PC，而不适用于其他PC或智能手机。
我想找出根本原因并解决问题--这样变焦器就可以在所有平台上运行。
适用于:一台带有IE8的XP PC和Adobe查看器加载项。
不工作: XP PC与火狐；胜利7与IE8，火狐，Chrome；移动歌剧
相关代码如下。
<style type="text/css">
@import "jquery.svg.css";
#svgbasics { width: 800px; h
浏览 1提问于2012-08-25得票数 0
这个库为我们提供了使用<TransformWrapper>的方法，它有很多方法。但是我想使用setScale方法，我的问题是我不能设置缩放的位置
<TransformWrapper
defaultScale={1}
options={{ minScale: 1, maxScale: 4 }}
zoomIn={{ step: 5 }}
zoomOut={{ step: 5 }}
wheel={{ step: 35, limitsOnWheel: true }}
doubleClick={{ disabl
浏览 1提问于2021-05-11得票数 1
enum PtzButton: Int {
case play = 1
case up = 2
case stop = 3
case left = 4
case none = 5
case right = 6
case zoomIn = 7
case down = 8
case zoomOut = 9
internal static let ptzActionMap: [PtzButton: PtzAction] = [
.up: .up,
.down: .down,
浏览 4提问于2017-03-12得票数 5
回答已采纳
我需要将swipeGesture添加到我的UIWebView中，但是我需要停止该UIWebView的ZoomIn和ZoomOut
/*Swipe is enabled and zoom as well*/
webViewPlayer.scalesPageToFit = true
当我把它改成
webViewPlayer.scalesPageToFit = false
//zooming and swipe both disabled
编辑1
我只想swipeGesture到UIWebView，没有ZoomIn和ZoomOut
我尝试过将swipeGesture添加到UIWebView和
浏览 3提问于2016-06-17得票数 1
回答已采纳
我有一个div，其中包含一些html内容，如文本和表格，通过使用jQuery或任何其他工具，我需要使html内容放大和缩小。
我试过下面的代码，但它在Firefox中不起作用。
HTML
<input type="button" id="zoomin" value="+" onclick="return ZoomIn();">
<input type="button" id="zoomout" value="-" onclick="return ZoomO
浏览 4提问于2013-11-06得票数 0
我正在尝试从ngx图像裁剪放大和缩小。我没有得到任何错误，但当我点击按钮zoomOut或ZoomIn它不工作。 我在这里做错了什么？ 我的TS代码 zoomOut() {
this.scale -= .1;
this.transform = {
...this.transform,
scale: this.scale
};
}
zoomIn() {
this.scale += .1;
this.transform = {
...this.transform,
scale: this.
浏览 40提问于2021-02-02得票数 0
下面有一个闪亮的应用程序，在这个应用程序中，我使用js添加控件，对svg文件进行缩放和重置。它一直在工作，直到我将输出放入另一个UiOutput的那一刻。
library(shiny)
library(shinyWidgets)
library(DiagrammeR)
library(magrittr)
js <- '
$(document).ready(function(){
var element = document.getElementById("grr");
var instance = panzoom(element);
var z = 1;
$(&
浏览 3提问于2021-12-20得票数 0
回答已采纳
2回答
这是我第一次涉足Android世界，我在通过代码对齐按钮时遇到了麻烦。无论我设置哪个参数(下面是RIGHT_OF等)，它们都会堆叠在一起。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/screen2Layout"
浏览 0提问于2015-01-03得票数 0
我打算使用Java开发导航地图系统，并为视图部分开发ArcGIS文件。我目前面临的是zoomButtons禁用:在一些zoomlevel示例中，zoomIn按钮应该在zoomlevel = 18中禁用，而zoomout应该在zoomlevel = 0中禁用。现在，当我试图在几个缩放级别禁用这些按钮时，我被卡住了。有人能帮我解决这个问题吗？您可以在下面找到附加的代码。
我已经开发了zoomIn和zoomOut方法，它们正在正常工作。
//ZoomIn Function is created
public void zoomInFunction() {
Viewpoint current
浏览 0提问于2019-09-05得票数 2
因此，我正在尝试为横幅图像创建一个非常慢的放大和缩小效果
效果是有效的，但动画非常非常不稳定。有没有什么办法可以改善效果，使之更流畅？Img的默认大小为1000px，因此zoomIn函数的大小增加了30%。在50000ms它相当平滑，但为了想要的效果(不太分散对页面内容的观众)，我希望它是100000-200000ms。
感谢您能提供的任何帮助！
$bannerImg = $('img');
function zoomIn(){
$bannerImg.animate({
width: '+=300',
}, 100000
浏览 3提问于2013-05-11得票数 0
回答已采纳
1回答
我有下面的代码，它应该是在mouseover上扩展一个形状，然后在mouseout上将它缩回原来的大小。我有几个问题：
我如何改变比例金额？
我如何在一定的时间内结束动画？
如何在不引起故障的情况下完成1和2。
当鼠标指针快速通过形状时，一些帧突然跳跃。我该怎么解决这个问题？
我所需要的只是一个形状，当它被鼠标移动时，它会慢慢变大，然后在鼠标出来时返回到它原来的大小。
<div id="container"></div>
<script src="js/kinetic.min.js" char
浏览 2提问于2013-09-09得票数 0
回答已采纳
在我的android应用程序中，当我点击所有图片都是动画的时候，我有五个图像视图。我为所有图像设置了缩放和Zoomin动画。动画完成后，选定的图像视图是不可见的。在图像不可见之后，当我单击该图像视图位置时，它将再次启动动画，并且图像是不可见的。
缩放-在动画：
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1"
android:toXScale="5"
android:fromYScale="
浏览 6提问于2013-11-12得票数 0
回答已采纳
1回答
我试图实现语义缩放控件，但不使用listview、Gridview或分组。我的UI有以下XAML
ZoomIn
<!--Your ZoomIn view here-->
<ScrollViewer>
<StackPanel>
<Grid x:Name="Item1" />
<Grid x:Name="Item2" />
浏览 1提问于2013-07-26得票数 0
回答已采纳
我正在尝试实现一个缩放功能。onClick运行良好，但我想让它当我按住缩放按钮时，它会连续缩放。我如何用ReactJS实现这一点呢？
我使用它作为模板，但是onMousedown没有根据console.log进行注册
<div className="zoomControl" >
<button className="zoomIn" onMouseDown={this.zoomIn}>+</button>
<button cla
浏览 3提问于2016-10-19得票数 9
我想在网格布局中构建一个简单的图片库，并且我使用类似于这个的东西来缩放悬停的图像。但是，我宁愿使用UL (未排序列表)来代替链接中的表样式。也许桌子也可以，你告诉我:)
<ul id="grid">
<li class="thumb"><a href="images/001.jpg" style="position:relative; left:2px; top:1px">
<img class="" src="images/001thumb
浏览 7提问于2014-04-01得票数 0
回答已采纳
2回答
我有这样的代码，它画了一个圆角六角形，当鼠标来回移动时，它会放大。如何使代码模块化和可重用，如何将其转换为函数？特别是六角画代码？
<script src="js/kinetic.min.js" charset="utf-8"></script>
<script defer="defer" type="text/javascript">
function zoomHex() {
}
var stage = new Kinetic.S
浏览 0提问于2013-09-09得票数 0
回答已采纳
1回答
我正在尝试设置一个游戏的缩放，你点击一个按钮来放大，另一个按钮来缩小(这将是UI的一部分)。
我在将按钮输入到代码时遇到了问题。我可以看到按钮没有按下，但如果按下了，我就不知道怎么读了。
通过查看API参考，我有了尝试使用按钮的“状态”的想法，但即使按钮被按下，它也总是返回0。这可能是因为更新函数的更新速度没有按钮的状态变化那么快。
下面是我的代码：
class GameScene: SKScene {
override func sceneDidLoad() {
cam = SKCameraNode()
cam.xScale = 1
c
浏览 11提问于2017-03-03得票数 1
我编写了一个自定义ViewController，它有如下所示的webview视图：
@interface WebpageController : UIViewController<UIWebViewDelegate> {
UIWebView* webView;
//....
}
它的构造者：
-(id)init {
if (self = [super init]) {
webView=[[UIWebView alloc]init];
webView.delegate=self;
webView.scalesPageToFit = Y
浏览 3提问于2012-08-10得票数 1
如何在wordpress元框字段中通过下拉选择替换单选按钮?？
<tr valign="top">
<th scope="row"><label for="effectv">Select effect</label></th>
<td>
<input type="radio" id="effectv" name="b26slider_options[effectv]" <?php
浏览 5提问于2016-08-20得票数 0
回答已采纳
2回答
我使用JQuery中的动画功能对图像进行放大/缩小功能。它在除Internet Explorer之外的所有浏览器上都能正常工作。下面是代码片段，我正在使用jquery-1.2.3.min.js。
如果您能帮助我解决这个问题，我将非常感激。提前感谢！
HTML：
<div class="mapImage">
<p>
<a href="#" id="zoomIn" class="in">Zoom In</a>
<a href="#
浏览 0提问于2012-03-02得票数 0
1回答
我想请你帮个忙。我有一些严重的问题svg放大。我正在使用javascript和库svg.js。有一个类照相机，其中包含两个方法: zoomIn()和zoomOut()
目前看来，它似乎有效，但它只在(0,0)点放大。我做了一些谷歌搜索，但找不到任何漂亮的解决方案。
下面是我的Camera.zoomIn()函数：
App.Model.Camera.prototype.zoomIn = function(point) {
this.viewbox.width *= this._zoomStep;
this.viewbox.height *= this._zoomStep;
浏览 0提问于2015-07-31得票数 1
我使用ExtJS创建左侧工具栏，但是图标仍然是水平的，而不是垂直的。知道为什么吗！
我是这样创建工具栏的：
function createActions() {
actions['nav'] = createAction(panControl,"","Pan", "pan48", true, "navGroup");
actions['zoomin'] = createAction(zoomboxInControl,"", "ZoomIn", "
浏览 5提问于2013-12-03得票数 0
回答已采纳
3回答
我想设计如下所示的菜单栏，我已经在ul中创建了整个列表，但如何为中心.Please帮助设置不同的高度，宽度我尝试了下面的代码，但中间部分没有增加，
<nav id="Edit_panel">
<ul>
<li class="menubar" title="redo">
<div id="link">redo</div>
</li>
浏览 1提问于2013-08-23得票数 0
1回答
使用织物放大到画布的中心
、、、
我正在用fabric.js在画布上实现缩放功能。我实现了缩放，但不知何故，它并没有放大到画布的中心。它放大到画布的左上角。
下面是我同样的JS。
<script>
var canvas = new fabric.Canvas("Canvas-Id", {
selection: true,
width: 800,
height: 400
});
canvas.setBackgroundImage('http://i24.photobucket.com/albums/c22/smeagolsfree/TSCHQ.png
浏览 2提问于2015-04-15得票数 5
回答已采纳
我使用了一个名为react-zoom-pan-pinch的npm，它有多个函数作为道具。但是我想在组件之外调用其中的一些。如何在自己的函数中调用组件函数？ const handleShiftClick = () => {
if (event.shiftKey) {
zoomOut();// component function
}
};
return (
<div className="App">
<TransformWrapper initialScale={1}>
// fun
浏览 36提问于2021-08-19得票数 1
回答已采纳
1回答
我正在开发一个应用程序，捕获图像，然后比较图像。在主屏幕或第一个屏幕上，我有一个图像视图，显示单击n比较。当我点击它时，它会打开相机，捕捉图片，然后在第二个活动中显示图像。在第二个活动中，我总共有四个图像视图和一个捕捉照片的按钮。现在，当我单击图像时，它应该会放大，当我再次单击时，它应该会缩放它。这对第一张图片很有效，但对于其他图像，当我缩小时，它也会放大其他图像。请告诉我我哪里错了。我已经在Manifest文件中放置了摄像头权限，下面是第二个活动(CompareActivity.java)的代码。
import android.app.Activity;
import android.con
浏览 2提问于2014-09-26得票数 0
我有一个从一个简洁的查询中获得的IEnumerable<dynamic>，它使用json.net序列化，如下所示。
[{"id": "ZoomIn", "label": "Zoom In"},
{"id": "ZoomOut", "label": "Zoom Out"},
{"id": "OriginalView", "label": "Original View
浏览 0提问于2016-02-13得票数 0
我想在图像zoomIN和zoomOUT时调整滚动条，我在JPanel和JScrollpane上显示的图像包含JPanel。
浏览 4提问于2011-09-07得票数 3
回答已采纳
我正试着在QtableWidget上设置放大/缩小效果。为此，我必须使用变量self.myfont和self.table_size，前者是一个Qfont对象，后者是一个整数。 当我想放大/缩小时，我调用这两个函数： def zoomin(self):
fontsize = self.myfont.pointSize() + 1
if fontsize < 1:
fontsize = 1
self.myfont.setPointSize(fontsize)
self.table_size +=
浏览 36提问于2020-09-15得票数 0
1回答
最近，我将我的定制Android设备的webview从Android4.2.2的webview实现改为人行横道。
在最初的实现中，我可以使用
WebView.zoomIn();
和
WebView.zoomOut();
不过，我在人行横道上找不到类似的东西。
有人做过类似的事吗？还是我最好的机会来实现并注入一些javascript来扩展页面？
浏览 2提问于2014-09-08得票数 2
回答已采纳
我正在使用Fancybox 2.04版本，我意识到还有一些问题，但我正在尝试实现下一个和之前的方法来使用zoomIn ZoomOut功能，而不是默认的滑动(我假设它是slideDown，我确实认为它很棒)。
这是我正在使用的代码，但它似乎不起作用，它关闭了图层，并且不会前进到图库中的下一个图像。
$('.zoom').fancybox({
nextMethod: 'zoomIn',
prevMethod: 'zoomOut',
helpers : {
overlay : {
css :
浏览 2提问于2011-12-20得票数 0
2回答
当缩放两个重叠的图像(即使大小相同)时，就会出现这个问题。
在我的场景中，我有两个相同大小(宽度x高度)的透明图像:一个背景图像和一个裁剪的头部。我在一个已知宽度的相对<div>容器中用绝对位置覆盖了它们。我试着使用普通的浏览器缩放功能来放大和缩小，我注意到两层之间在不同缩放因子上的像素偏移！然而，100%是一个完美的契合。
从技术上讲，我尝试使用一个<div>标记，其中包含两个相同图像的background-image URL(使用CSS)。我还试图拥有一个SVG，它可以同时保存两个PNG图像。我尝试使用不同尺寸的图像(总是相同的宽度，不同的高度)。
，，我的实验都没
浏览 0提问于2018-09-28得票数 4
我使用的是react-native-animatable插件，我想对同一文本使用多个动画。基本上，我想要做的是zoomIn一个文本，它的持续时间是1s，延迟是0s，然后当它完成后，用1s的持续时间和3s的延迟对相同的文本执行脉冲动画。然后最后zoomOut相同的文本，持续时间为1s，延迟为5s 到目前为止，只有最后一个动画执行 以下是我的代码 import * as Animatable from 'react-native-animatable';
<View style={{ backgroundColor: '#203546', flex: 1,
浏览 28提问于2019-09-25得票数 1
回答已采纳
2回答
我已经创建了一个MainMenu和两个动画: ZoomIn & ZoomOut。MainMenu将填充画布，每个画布都包含图标。我正在尝试做的是，点击一个按钮，当前可见的面板用ZoomOut消失，点击的面板用ZoomIn出现。
到目前为止，我已经成功地使用以下代码从后台代码调用了Animation：
Dim ZoomOut As Storyboard = DirectCast(FindResource("storyZoomOut"), Storyboard)
ZoomOut.Begin()
但现在我想让特定的控件具有动画效果。还有没有可能同时动画两个不同的控件？
浏览 0提问于2013-03-16得票数 0
回答已采纳
1回答
我想放大div中的图像，但是当我试图放大图像时，div的大小也在增加。
<img src="" alt="Image Preview" id="zoom" class="image-preview__image">
<div class="btn-group mt-2" role="group" aria-label="">
<button ng-click="Size=100" class="btn
浏览 5提问于2022-01-11得票数 1
回答已采纳
我在做一个投资组合网站。我想要的背景是文本自动改变像'HTML‘到'CSS’到'JavaScript‘。然而，我也想让它们改变，不是简单地改变，而是像animation.css中的zoomIn和zoomOut那样的动画。换句话说，当文本“HTML”在变为CSS之前消失时，它会变得越来越小，直到你看不见，并且再次变得越来越大。很抱歉造成这么大的麻烦。 目前，我通过在单词数组上实现setInterval来超时更改文本。 index.html <h1 id="change"></h1> main.js const symbols =
浏览 31提问于2019-03-20得票数 0
回答已采纳
3回答
我想在反转动画之前用一些时间延迟来反转放大动画下面是无限反转的代码，但我需要在反转动画之前设置一些时间间隔。
zoom_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
xmlns:android="http://schemas.android.com
浏览 6提问于2017-01-07得票数 1
2回答
在过去，我遇到了，这是一个伟大的发现，非常简单地用于各种图像。我正在寻找一个抓取缩放功能使用纯javascript，而不是jQuery。有什么纯Javascript解决方案吗？到目前为止，我一直没有运气地尝试过这一点：
Javascript：
var imgSize = 1;
function zoomIn() {
imgSize += 0.1;
document.body.style.imgSize = imgSize + "em";
}
function zoomOut() {
imgSize -= 0.1;
document.body.style.
浏览 8提问于2014-03-05得票数 1
回答已采纳
我有一个UI，其中有一个显示多边形的GLSurfaceView。
UI还有两个按钮ZoomIn和ZoomOut。当用户按下这些按钮时，将调用myGLSurfaceView的zoomIn()和zoomOut()方法。
问题是，我希望调用onDrawFrame get方法来反映放大和缩小。
为什么我想要这个？因为按钮有setClickable(true)；为什么？因为我需要的是，如果用户的手指按下按钮，缩放get将继续应用，直到用户释放buton。
现在它可以工作了，但效果很差，我需要刷新GLsurfaceview forcing onDrawFrame
浏览 0提问于2011-10-04得票数 3
回答已采纳
1回答
来自 (Dyin的答案)，我仍然无法使它正常工作。
我想用jQuery .show()淡入div。这个div包含一个img。现在，我希望在jQuery()命令开始时，用css转换和缩放(而不是jQuery，因为它要平滑得多)缓慢地将img放大。
简而言之:我希望在包含img的时候，div可以淡入(同时显示和放大)。但是，我只能在.show()函数完成后才能缩放，如下所示：
$( this ).show(800, function(){
$( ".bullets" ).removeClass("wait");
$( this ).find("
浏览 2提问于2015-04-30得票数 2
回答已采纳
我有一个div和一个类，它的css是display: none;。按一下按钮，我就用一个类切换ng-class="vm.showing ? 'zoomIn' : 'zoomOut'"来更改这个类。问题是，当样式设置为display: none;时，角似乎没有填充ng重复元素。
编辑我想使用animate.css，所以实际上代码应该是ng-class="vm.showing ? 'zoomIn' : 'zoomOut'
更新代码：
<button ng-click="vm.showing = t
浏览 3提问于2016-05-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
