<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.idiv{
border-color: #43ACDB;
border:1px solid silver;
margin:0 auto; /*是为了保证在火狐浏览器中能居中显示*/
width:98%;
background-color:#CCCCCC; z-index:50; position:absolute;
}
</style>
</HEAD>
<BODY>
<input type="button" value="max" onclick="init()" id='oooo' style='display:block'>
<input type="button" value="min" onclick="min()">
<input type="button" value="打开" onclick="resize()" id='ooo' style='display:none'>
<div id="alertScreen" style="background-color:#CCCCCC; z-index:50; position:absolute">
<div class="idiv">afa</div>
<iframe id="alertWinFrame" width="100%" src="www.baidu.com" frameborder="0"></iframe>
</div>
<script>
var max = 1000;
var k = 0;
var o = document.getElementById('alertScreen');
var ooo = document.getElementById('ooo');
var oooo = document.getElementById('oooo');
function init(){
o.style.width=100;
resize();
}
function resize(){
o.style.display='block';
ooo.style.display='none';
oooo.style.display='block';
o.style.width=k;
k+=50;
if (k < max)
{
setTimeout("resize()",1);
}
}
function min(){
o.style.width=k;
k-=50;
if (k >50)
{
setTimeout("min()",1);
}
if (k<100)
{
o.style.display = 'none';
document.getElementById('ooo').style.display='block';
document.getElementById('oooo').style.display='none';
}
}
</script>
</BODY>
</HTML>
分享到：
相关推荐
标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能，允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素，如窗口、面板或者任何需要动态...
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小文件，在每个压缩包是一个，打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里，记事本打开...
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
Div放大效果的javascript源码
本示例中的“jquery div容器拖拽放大缩小浮动层代码”是一个利用jQuery实现的功能，允许用户对div元素进行拖动、缩放以及使其在页面上浮动。下面将详细介绍这一功能的实现原理和相关知识点。 1. **jQuery选择器**：...
html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果
在移动设备上，为了提供更好的用户体验，特别是在处理图像或视图时，双指缩放（Pinch Zoom）和双击放大缩小（Double Tap Zoom）功能是必不可少的。这些手势操作在许多应用程序和网页中被广泛使用，特别是对于查看高...
整体而言，微信小程序中实现滑动放大缩小效果需要对swiper组件的布局和样式进行精确控制，并结合JavaScript逻辑代码来实现动态交互。通过上述的实例代码和详细说明，开发者可以掌握如何在自己的小程序中实现这样的...
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现滚轮放大缩小的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
这个"jquery图片放大缩小"的项目就是一个典型的示例，它实现了当鼠标经过图片时，图片在div容器内自动放大的功能。下面我们将详细探讨相关的jQuery知识、图片处理技巧以及如何在HTML中应用这些技术。 首先，jQuery...
在本文中，我们将深入探讨如何使用JavaScript库JQuery实现图片的放大缩小和拖动功能。JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得前端开发更加高效。在这个项目中，"magnify-...
这个项目专注于创建一个可拖拽、放大和缩小的地图功能，让我们深入了解一下这些技术细节。 首先，我们要明白地图的基本原理。地图是通过经纬度坐标系统来定位地球表面的点，而Web上的地图通常是通过切片（tiles）...
这个查看器将具备放大、缩小、移动和还原图片的功能，并且能够在div容器内正常工作，同时兼容Internet Explorer（IE）和Firefox浏览器。我们将探讨以下几个关键知识点： 1. **图片加载**： 在JavaScript中，我们...
在"自定义百度地图放大缩小按钮功能"这个项目中，关键在于对地图的缩放控制进行自定义。 1. **创建地图实例**：在HTML页面中，我们需要创建一个div元素作为地图容器，然后通过JavaScript调用`BMap.Map`构造函数来...
通过学习和应用这样的技术，开发者可以构建更加动态和吸引人的网页应用。 总的来说，jQuery的点击事件处理和CSS的动态样式变化是实现这个功能的关键。通过理解并实践这个例子，开发者可以掌握使用jQuery实现动态...
标题 "jQuery div层的放大与缩小简单实现代码" 涉及的核心知识点是使用JavaScript库jQuery来操作HTML中的div元素，实现动态改变div尺寸的效果。这段代码的主要目标是创建一个可交互的div层，用户可以通过点击按钮来...
在标签中提到了“图片拖动”和“图片放大缩小”，这进一步证实了上述技术路线。对于图片拖动，除了监听鼠标的事件，还需要考虑到边界检测，以防止图片超出容器范围。对于放大缩小，需要确保比例的正确计算，保持地图...
在Web开发中，图片的放大和缩小是常见的交互功能，尤其是在产品展示、照片画廊或图像预览等场景。jQuery是一个轻量级的JavaScript库，提供了丰富的API来简化DOM操作，使得实现图片的动态缩放变得非常简单。本文将...
总的来说，“jQuery动态放大缩小标签导航”是一种优秀的交互设计，结合了jQuery的便利性和CSS3的视觉效果，提升了网页的用户体验。在实际开发中，我们应当灵活运用这些技术，创造出更多富有创新和吸引力的交互元素。