js写的方法实现上传图片之后查看大图

 用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来

将图片查询出来之后,还需要加一个查看大图的功能,于是就用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来。 
 
显示大图和隐藏大图的js代码: 
代码如下:
<script type="text/javascript"> 
//显示图片 
function over(imgid,obj,imgbig) 

//大图显示的最大尺寸 4比3的大小 400 300 
maxwidth=400; 
maxheight=300; 
 
//显示 
obj.style.display=""; 
imgbig.src=imgid.src; 
 
 
//1、宽和高都超过了,看谁超过的多,谁超的多就将谁设置为最大值,其余策略按照2、3 
//2、如果宽超过了并且高没有超,设置宽为最大值 
//3、如果宽没超过并且高超过了,设置高为最大值 
 
if(img.width>maxwidth&&img.height>maxheight) 

pare=(img.width-maxwidth)-(img.height-maxheight); 
if(pare>=0) 
img.width=maxwidth; 
else 
img.height=maxheight; 

else if(img.width>maxwidth&&img.height<=maxheight) 

img.width=maxwidth; 

else if(img.width<=maxwidth&&img.height>maxheight) 

img.height=maxheight; 


 
//隐藏图片 
function out() 

document.getElementById('divImage').style.display="none"; 

</script> 
 
显示小图的image和显示大图的image: 
代码如下:
<img id="img" src="你的图片地址" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" width="100" alt="" height="100" /> 
 
<%--显示大图标的区域--%> 
<div id="divImage" style="display: none; left: 120px;top:5px; position: absolute"> 
<img id="imgbig" src="~/Images/noImage.gif" alt="预览" /> 
</div> 

时间: 2024-08-22 14:10:29

js写的方法实现上传图片之后查看大图的相关文章

js写的方法实现上传图片之后查看大图_javascript技巧

将图片查询出来之后,还需要加一个查看大图的功能,于是就用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来. 显示大图和隐藏大图的js代码: 复制代码 代码如下: <script type="text/javascript"> //显示图片 function over(imgid,obj,imgbig) { //大图显示的最大尺寸 4比3的大小 400 300 maxwidth=400; ma

ASP.NET获取不到js写的cookie解决方法

今晚使用javascript设置一个来路的cookie,之后使用ASP.NET获取这个cookie值,发现ASP.NET获取不到JS设置的cookie值,真郁闷中,以下是JS写Cookie的代码:  Code //写cookies function setCookie(name,value) { document.cookie = name "=" escape (value) ";"; //设置的cookie关闭浏览即失效 } //JS设置来路写入到cookie

小白用php仿照js写的一个加密方法 就是有问题 求解答

问题描述 小白用php仿照js写的一个加密方法 就是有问题 求解答 原本的js是一段加密的方法 function checkform() { var dcode; var dcode1; var dcode2; dcode=document.form1.pwd.value; dcode1=""; dcode2=1275903582 dcode2=""+dcode2*137; var tmpstr; var dcodelen; dcodelen=dcode.lengt

Android WebView使用方法详解 附js交互调用方法_Android

目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用  一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView

JS重载实现方法分析_javascript技巧

本文实例分析了JS重载实现方法.分享给大家供大家参考,具体如下: 重载是面向对象语言里很重要的一个特性,JS中没有真正的重载,是模拟出来的(因为js是基于对象的编程语言,不是纯面向对象的,它没有真正的多态:如继承.重载.重写) 一.什么时候用重载? 举例: function getDataTop10(){ alert("返回前10条数据"); } 后来需求改了,需要获得20条数据,而getDataTop10又被很多函数调用了,整体替换可以但麻烦,这时可以用重载 进而引出什么是重载:函数

js继承实现方法详解_javascript技巧

本文实例讲述了js继承实现方法.分享给大家供大家参考,具体如下: var animal=function(name){ //构造函数 this.name=name; this.sayhello=function(){ alert("hi我是"+this.name); }; } animal.prototype.shout=function(){ //prototype主要作用:给类增加一个新的属性或函数 alert(this.name+"正在叫!"); }; ani

Android WebView使用方法详解 附js交互调用方法

目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1

iframe里面的页面调用父窗口,左右窗口js函数的方法

iframe里面的页面调用父窗口,左右窗口js函数的方法 实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法. 比如有A窗口,A内有个IFRAME B,B里面的装载的是C页面,这时C要直接调用A里面的一个自定义函数AFUN(); 那么只要在C页面中写如下JS函数就可以了: window.parent.AFUN(); 如果AFUN()有参数也可以直接传递合适的参数进去. 例如: 修改父窗口控件属性 window.parent.document.getElementById('

纯js写的分页表格数据为json串

 这篇文章主要介绍了纯js写的分页,表格数据为json串,需要的朋友可以参考下 什么也不说了,直接上代码:   代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  <%@ taglib prefix="s" uri="/struts-tags" %>  <%  String pa