`
qinya06
  • 浏览: 593479 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

双击展开图片

阅读更多
main.jsp
<c:set var="showpage" value="${requestScope.showpage}"/>
    	<c:if test="${empty showpage}">
    	<c:set var="showpage" value="welcome.jsp"/>
    	</c:if>
<table border="0" cellpadding="0" cellspacing="0" width="833">
    		<tr height="50"><td><img src="images/top.jpg"></td></tr>
    	</table>
    	<table border="0" cellpadding="0" cellspacing="0" width="833">
    		<tr>
    			<td width="213" valign="top" background="images/leftbg.jpg">
    				<form action="vote" name="voteform" method="post" target="resultpage">   				
    				<table border="0" width="100%">
    					<tr height="95" align="center"><td colspan="2"><img src="images/lefttopbg.jpg"></td></tr>
    					<c:set var="options" value="${requestScope.optionlist}"/>    					
    					<c:if test="${empty options}">
    					<tr><td colspan="2">没有投票选项</td></tr>
    					</c:if>    					
    					<c:if test="${!empty options}">
    					<c:forEach var="option" varStatus="ovs" items="${options}">
    					<tr>
    						<td style="padding-left:20"><img src="images/title.jpg"> ${option.optionName}</td>
    						<td align="center"><input type="radio" name="movie" value="${option.id}" onclick="message.innerHTML=''"></td>
    					</tr>
    					<tr><td colspan="2"><img src="images/line.jpg"></td></tr>
    					</c:forEach>
    					</c:if>
    					<tr height="40">
    						<td><b><span id="message" style="color:red"></span></b></td>
    						<td><input type="button" value="" name="voteb" style="background-image:url(images/submit.jpg);border:0;width:76;height:23" onclick="checkvote()"></td>
    					</tr>    					
    				</table>
    				</form>
    			</td>
<td align="center" valign="top">
    				<span id="wait" style="display:none">
    					正在加载...
    				</span>
    				<span id="result" style="display:">
    					<iframe id="resultpage" name="resultpage" frameborder="0" width="100%" height="450" scrolling="no" src="${showpage}"></iframe>   				</span>
    			</td>
    		</tr>
    	</table>    	


showresult.jsp
<%@ page contentType="text/html;charset=gb2312"%>

<script type="text/javascript" src="js/vote.js"></script>
<body onload="waitload()" bgcolor="#EEEEEE">
	<center>
	<jsp:include page="plot/${requestScope.path}.map"/>
	<div ondblclick="size()">
		<img id="pic" src="plot/${requestScope.path}.jpg" title="双击收缩图片" alt="正在加载图片,请稍等..." usemap="#mymap" style="border:0">
	</div>
	</center>
</body>




var mark1="off";
var mark2="off";


function checkvote(){
	var movies=document.getElementsByName("movie");
	var i=0;
	for(i=0;i<movies.length;i++){
		if(movies[i].checked){
			waitclick();
			voteform.voteb.disabled=true;
			voteform.submit();
			break;
		}
	}

function waitclick(){
	wait.style.display='';
	result.style.display='none';
}

function waitload(){
	parent.wait.style.display='none';
	parent.result.style.display='';
}
//在showresult.jsp页面中调用的脚本,用于实现图片显示区域的缩放
function size(){
	var tag1=parent.document.getElementById("resultpic");	//获取父页面(toresult.jsp)中id属性值为“resultpic”的元素(这里为iframe框架)
	if(mark1=="off"){
		mark1="on";
		tag1.height=document.body.scrollHeight;		//将tag1元素的高度设置为showresult.jsp页面的高度,实现放大效果
	}
	else{
		mark1="off";
		tag1.height=350;				//将tag1元素的高度设置为指定值,实现缩小效果
	}
	
	var tag2=parent.parent.document.getElementById("resultpage");	//获取父页面的父页面(main.jsp)中id属性值为“resultpage”的元素(这里为iframe框架)
	if(mark2=="off"){
		mark2="on";
		tag2.height=parent.document.body.scrollHeight;		//将tag2元素的高度设置为showresult.jsp的父页面toresult.jsp的高度,实现放大效果
	}
	else{
		mark2="off";
		tag2.height=450;					//将tag2元素的高度设置为指定值,实现缩小效果
	}
}
分享到:
评论

相关推荐

    鼠标双击或触摸双击事件检测jQuery插件

    - 展开/收起详细信息。 - 切换图片或内容。 - 在地图应用中缩放。 **六、总结** jQuery-doubleTap插件提供了一种高效、易于集成的方法,使得开发者可以轻松地在网页中添加鼠标双击和触摸屏双击事件的检测。通过其...

    鼠标双击技巧集合(全),

    26. **幻灯片大纲视图**:在“幻灯片大纲视图”中双击某幻灯片图标,可以折叠或展开显示该幻灯片的文本内容。 27. **子文档切换**:导航面板中双击子文档节点可以打开或切换到该子文档窗口。 #### 科教编辑 28. **...

    jQuery触摸鼠标双击事件检测代码.zip

    在实际应用中,开发者可以使用这个插件来实现诸如放大图片、展开折叠内容或者任何需要双击触发的功能。通过以下代码示例,我们可以看到如何使用这个插件: ```javascript $(document).ready(function() { $...

    C# 树形控件的初始化及节点折叠展开图片加载控制

    网站简介|广告服务|VIP资费标准|银行汇款帐号|网站地图|帮助|联系方式|诚聘英才|English|版权声明|问题报告 北京创新乐知广告有限公司 版权所有, 京 ICP 证 070598 ...世纪乐知(北京)网络技术有限公司 提供技术支持 ...

    3D360度可旋转立方体相册前端可用于表白,立方体图片可分层展开双击html文件打开自动播放,可以使用vscode自行修改代码

    3D360度可旋转立方体相册前端,可用于表白,双击html文件打开自动播放,可以使用vscode自行修改代码 介绍:代码使用3D前端技术的...图片加载和展示:通过前端代码将图片加载到立方体上,并让它们以3D的形式展示出来。

    CODESYS之添加图片资源.docx

    2. 在项目导航器中,展开“资源”(Resources)文件夹,点击“图片”(Pictures)以显示当前的图片池。 3. 右键点击图片池,选择“添加”(Add)或者直接在空白处双击,会弹出文件选择对话框。 4. 在对话框中,浏览...

    TreeTable,用于展开/折叠table的行

    2. **可交互性**:用户可以通过点击行的特殊图标(如加号或减号)来控制行的展开和折叠,也可以通过单击或双击行来执行其他操作,如查看详情或编辑数据。 3. **数据绑定**:TreeTable通常与后端数据源进行绑定,...

    TIA博途WINCC中组态触摸屏画面,如何把图形库中的图片导出修改后再导入?.docx

    双击新添加的HMI设备,这会打开根画面。根画面是用户界面的起点,所有的可视化元素都将在这个画面上配置。 3. **访问图形库**: 在右侧的“对象浏览器”或“属性浏览器”中,找到“工具箱”。在工具箱中,展开...

    枚举图片设置桌面背景源码

    双击图片预览功能可以通过创建一个新窗口,将图片加载到控件(如PictureBox)中实现。事件处理函数,如`Control.DoubleClick`,可以监听用户双击事件并触发图片查看。 重命名图片的功能则需要调用文件操作接口,如`...

    很好用的高清JPE图片压缩小工具

    至于压缩包子文件的文件名称列表,"图片压缩.exe"很显然是该图片压缩软件的可执行文件,用户可以通过双击运行这个文件来启动软件。"说明_Readme.html"则是一个常见的帮助文档,通常包含了软件的使用指南、版本信息、...

    Java实现批量图片添加自定义水印

    本文将深入探讨如何使用Java来实现这一功能,主要围绕标题"Java实现批量图片添加自定义水印"展开,结合描述中的"水印jar包以及双击bat文件",我们将讨论Java实现的原理、步骤以及使用到的工具。 首先,水印jar包...

    C#用treeView控件写的图片浏览器

    4. **优化用户体验**:添加一些额外的功能,比如预览图片(双击节点时)、缩放图片、前进/后退按钮等。这些可以通过添加额外的控件和编写相应的事件处理程序来实现。 5. **错误处理**:确保在尝试打开不存在的文件...

    大图查看器

    2. **双击变大**:这是一种便捷的操作方式,用户只需双击图片,程序会自动将图片放大到适合屏幕的尺寸,方便快速查看。 3. **手势放大缩小**:除了双击操作,用户还可以通过平移和捏合手势来改变图片的显示比例。平...

    支持PNG格式的图片修改ResourceHacker

    双击你想要修改的PNG图片资源,ResourceHacker会将其显示在右侧的预览窗口。如果你想要替换图片,可以点击“动作”菜单中的“替换位图”或“替换图标”,然后选择新的PNG图片文件。确保新图片的尺寸和颜色深度与原...

    DraggableImageViewer:大图浏览&图片查看&拖拽退出。某些微信,B站的图片和视频浏览器

    一种典型的微信/ B站的图片浏览组件,主要具有以下特点:类似共享元素的入场和退场动画(图片在入场时给人一种渐进展开的效果)拖拽&双击退出图片查看支持缩放手势支持查看长图支持查看原图&下载原图支持显示GIF和...

    android图片资源查看

    在Android开发过程中,图片资源、UI布局和层级的查看至关重要,因为它们直接影响到应用程序的视觉效果和用户体验。本文将详细讲解如何使用Android SDK中的“层级观察器”(Hierarchy Viewer)来查看和分析这些元素。...

    鼠标右键背景修改器,将你的右键背景换成美女图片

    2.然后依次展开“Bitmap-129-2057”,注意要用鼠标点中2057才会出现ContextBG.dll里面的图片。 3.接下来“右击2057-替换资源-弹出‘替换位图于’对话框-点击‘打开新位图文件按钮’-弹出‘打开’对话框-定位...

    图片放大缩小

    本文将详细讲解如何实现这个功能,主要围绕"手势对图片进行放大缩小操作"这一主题展开。 首先,我们需要理解Android中的手势识别。Android提供了GestureDetector类来处理用户的手势操作,如单击、双击、滑动和缩放...

    ocr图片文字识别

    本主题主要围绕“OCR图片文字识别”展开,结合Java、JAR和EXE文件的使用进行详细讲解。 1. OCR技术基础: OCR技术通过分析图像中的字符形状,识别出文本。它通常包括预处理、特征提取、字符识别和后处理四个步骤。...

    Win7怎么设置给图片文件自定义排序?.docx

    2. 在组策略编辑器中,依次展开“计算机配置”、“管理模板”、“Windows 组件”、“Windows 资源管理器”。 3. 在右边窗口中,找到“关闭 Windows 资源管理器中的数值排序”。 4. 双击打开配置窗口,修改配置状态为...

Global site tag (gtag.js) - Google Analytics