`

控制 iframe 内图片放大缩小

aspjavascript 
阅读更多

index.asp 页面
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>

function small(){
var height1=test.img1.height;
var width1=test.img1.width;
test.img1.height=height1/1.5;
test.img1.width=width1/1.5;
}
function big(){
var height1=test.img1.height;
var width1=test.img1.width;
test.img1.height=height1*1.5;
test.img1.width=width1*1.5;
}

</script>
</head>
<body>
<input type="button" value="缩小" onclick="small()">
<input type="button" value="放大" onclick="big()">
<Iframe src="test.asp" name="test" width="800" height="600" scrolling="no" frameborder="0"></iframe>

</body>

</html>


test.asp页面
<html>
<body>
<img src="01.jpg" id="img1" width="680" height="480">
 </body>
</html>

分享到：
| JSP/Servlet:Scripting Variable
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    iframe缩放大小

    iframe缩放大小

    Iframe左侧页面缩放

    此页面分为两个Iframe，左侧一般用于二级菜单或者树形界面，可以通过点击Iframe之间分割线的图标进行左侧菜单的缩放

    iframe在移动端的缩放的示例代码

    然而，仅仅缩放iframe会导致内容的宽度和高度都按比例放大或缩小，从而出现内容显示不全的问题。为了解决这个问题，可以设置iframe的高度为设备高度除以缩放比例，以此来保持内容的完整性。 此外，`transform-...

    js图片iframe内页父页展示全屏

    在网页设计中，有时我们需要在父页面（外层页面）中通过`iframe`来嵌入子页面（内层页面），并实现子页面中的图片在父页面全屏展示。这个过程涉及到多个技术点，包括HTML、CSS以及JavaScript。下面将详细解释如何...

    嵌入到HTML的iframe自动适应大小

    3. **兼容性处理**：为了确保在不支持iframe或需要显示隐藏iframe的情况下也能正常工作，代码还提供了额外的处理逻辑，如通过`document.all`或`document.getElementById`来获取元素，并控制其display属性。...

    实现PDF在线预览，并可以支持手势放大缩小

    3. **手势识别**：为了实现手势放大缩小的功能，我们需要对用户的触摸事件进行监听和处理。这通常涉及到JavaScript的事件监听器，如`touchstart`、`touchmove`和`touchend`。通过计算两个手指之间的距离变化，我们...

    jquery 插件 图片浏览 支持跨iframe

    4. 显示图片：在目标iframe内动态创建或更新图片元素。 5. 用户交互：提供导航控制，响应用户操作。 ### 5. 使用与配置 在实际项目中，使用该插件可能涉及以下代码： ```javascript $('img').imageBrowse({ ...

    iframe根据页面内容自适应高度和宽度

    - 首先，将`iframe-resizer.js`引入父页面和`iframe`内的子页面。 - 在`iframe`的HTML中添加`id`，以便于JavaScript操作。 - 在父页面的JavaScript中初始化`iframe-resizer`，如下： ```javascript window....

    iframe缩小引用网页比例代码

    HTML使用iframe标签引用外部网页时，可以设置外部网页的显示比例适配当前iframe的大小，兼容各种浏览器哦

    Flex IFrame实现浏览附件信息

    如果需要提供缩略图或者其他控制功能，可以利用JavaScript库，如Fancybox或Lightbox，来增强图片的展示效果。 6. **安全与兼容性**：使用Flex IFrame时，需要注意跨域安全问题。由于IFrame加载的内容可能来自不同的...

    iframe for flex!

    3. **自适应比例**：通过设置`flex-basis`属性，可以让`iframe`根据周围空间按比例缩放，保持内容的宽高比，防止内容被不正确地拉伸或压缩。 4. **对齐和间距控制**：`flex`布局允许我们精确控制`iframe`的对齐方式...

    iframe标签实现pdf预览功能

    此外，还可以考虑使用专门处理PDF的库，如`pdf.js`，它提供了更丰富的功能，如分页、缩放、搜索等。然而，这将涉及更多的代码和配置，可能不适合简单的预览需求。 综上所述，`iframe`标签是一种简单易用的方法，...

    Android WebView拦截iframe标签内部跳转教程

    iframe 标签内部可以包含其他网页的内容，例如图片、视频、音频等。然而，在 Android WebView 中，如果我们不做特殊处理，iframe 标签内部的跳转将无法被拦截。 那么，如何在 Android WebView 中拦截 iframe 标签...

    用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

    在网页开发中，有时我们需要使用`iframe`来嵌入外部页面或者内容，但是`iframe`的高度自适应问题一直是一个常见的挑战。特别是在不同浏览器之间，由于兼容性问题，往往需要额外的处理才能达到理想的效果。本篇文章将...

    flex-iframe

    因此，了解Flex的布局管理器（如Box布局、Tile布局等）是必要的，以确保iframe能正确地在应用中定位和缩放。 6. **版本兼容性**：使用`flex-iframe-1.4.6`时，需要确保它与当前的Flex SDK和运行时环境兼容。不同的...

    lightbox插件图片全屏缩放下载功能代码

    缩放功能则可能是通过鼠标滚轮或手势操作实现，可以平滑地放大或缩小图片，以便查看细节。 图片下载功能一般通过在图片元素上添加一个隐藏的`&lt;a&gt;`标签，设置其`href`属性为原始大图的URL，并添加`download`属性，...

    类似于购物网站的图片放大效果

    - 使用`addEventListener`监听鼠标的`mouseover`和`mouseout`事件，控制图片放大和缩小。 - 创建一个放大镜效果，通常是一个透明的div，内含一个小的图片副本。当鼠标移动时，调整放大镜的位置和大小，显示放大后...

    dwz欢迎页的设置iframe打开加载地图

    `iframe`的`src`属性应指向地图服务的URL，这样当页面加载时，地图服务的页面就会在`iframe`内显示。 具体步骤可能包括： 1. 在DWZ的模板文件中找到欢迎页的HTML代码。 2. 添加或编辑`iframe`标签，设置`width`和`...

    [php]ifame仿ajax图片上传预览,兼容IE\FF\Chrome

    总的来说，这个项目提供了一个基于iframe的跨浏览器图片上传预览解决方案，对于那些需要在老式浏览器上实现类似功能的开发者来说，是一个有价值的参考资料。通过深入研究和理解这个项目的源码，我们可以学习到如何在...

    fancybox-mouse-control:Fancybox助手，用于缩放图像

    1. **鼠标滚轮缩放**：用户可以通过鼠标滚轮向前滚动放大图像，向后滚动缩小图像，使得查看细节更为便捷。 2. **平移功能**：在缩放后，用户可以通过鼠标拖动来平移图像，以便查看不同区域。 3. **交互提示**：可能...

Magicbox
Global site tag (gtag.js) - Google Analytics