#ShowBigImgDiv{position: absolute;z-index:;display: none;cursor: pointer;}
#FullScreenDiv{position: absolute;z-index:;display: none;background-color: #919191;filter: alpha(opacity=50);opacity: 0.5; cursor: pointer;}
<div id="FullScreenDiv" onclick="BackFullScreenHidde()" title="点击缩小"></div>
<div id="ShowBigImgDiv" onclick="BackFullScreenHidde()" title="点击缩小"></div><img onclick="BackFullScreen(this.src)" id="pic" alt="身份证" src="<%=rootpath%>/User/tocardimg?code=${user.f16}" height="100px" width="200px">
function BackFullScreen() {
var BigImgUrl = document.getElementById("pic").getAttribute("src");
var FullScreenDiv = document.getElementById("FullScreenDiv");
FullScreenDiv.style.width = document.body.clientWidth + "px";
FullScreenDiv.style.height = document.body.clientHeight + "px";
FullScreenDiv.style.display = "block";
var ShowBigImgDiv = document.getElementById("ShowBigImgDiv");
var ShowBigImgDivPosition;
ShowBigImgDiv.style.display = "block";
ShowBigImgDiv.innerHTML = "<img src=\"" + BigImgUrl + "\" width=\"500\" height=\"400\" border=\"0\" />";
ShowBigImgDivPosition = document.documentElement.scrollTop;
if (ShowBigImgDivPosition == 0 || ShowBigImgDivPosition == "") {
ShowBigImgDivPosition = document.body.scrollTop;
}
ShowBigImgDiv.style.top = ShowBigImgDivPosition + ((window.screen.height - ShowBigImgDiv.clientHeight) / 2 - 170 ) + "px";
ShowBigImgDiv.style.left = (window.screen.width - ShowBigImgDiv.clientWidth) / 2 - 90 + "px"; }
function BackFullScreenHidde() {
document.getElementById("ShowBigImgDiv").style.display = "none";
document.getElementById("FullScreenDiv").style.display = "none";
}

简单的实现了图片的缩放功能

通过JS简单实现图片缩放的更多相关文章

  1. Android 简单的图片缩放方法

    很简单的一个图片缩放方法,注意要比例设置正确否则可能会内存溢出 相关问题 java.lang.IllegalArgumentException: bitmap size exceeds 32bits ...

  2. JS简单实现图片切换

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  3. js 滚轮控制图片缩放大小和拖动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. iOS- XKZoomingView 简单的图片缩放预览,支持横屏、长图【手势:单击、双击、放大缩小】

    XKZoomingView.h #import <UIKit/UIKit.h> @interface XKZoomingView : UIScrollView /** 本地图片 */ @p ...

  5. JS简单的图片左右滚动

    <div id="scroll" style="overflow:hidden;width:757px;"> <table cellpaddi ...

  6. JS实现等比例缩放图片

    JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...

  7. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  9. HTML5 图片缩放功能

    腾讯新闻上用的插件(xw.qq.com) 缩放插件scale.js (function(window, undefined) { var document = window.document, sup ...

随机推荐

  1. iOS 动态下载系统提供的中文字体

    使用系统提供的中文字体,既可避免版权问题,又可以减小应用体积 #pragma mark - 判断字体是否已经被下载 - (BOOL)isFontDownLoaded:(NSString *)fontN ...

  2. html页面元素事件丢失

    前段时间做网站包括最近用mvc做oa都发现这个奇怪现象,就是页面加载完毕后页面元素事件(比如按钮点击.复选框change)一切正常,但是当执行查询或者其他操作后页面事件丢失.具体原因暂没有时间分析,现 ...

  3. cookie单点登录(跨域访问)

    新近一家公司上来就让做oa,要求嵌入公司现有系统模块,自然而然想到模拟post单点登录对方系统新建单点登陆页面保存session,然现有系统都有用cookie保存用户信息,故保存本地cookie……测 ...

  4. C#生成随机字符串(数字,字母,特殊符号)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. jQuery中方法html()与text()的不同

    区别一:html()方法设置或者返回被选元素的内容,其效果类似于操作元素对象的“innerHTML”属性:text()方法设置或者返回被选元素的文本内容,其效果等同于操作元素对象的“textConte ...

  6. Atom安装activate-power-mode插件(震动炫酷)

    1.下载安装Atom,地址:https://atom.io/ 2.下载安装activate-power-mode插件,地址:https://github.com/JoelBesada/activate ...

  7. fdisk,mount.label

    ########fdisk ll /dev/sda* df -TH fdisk -cul fdisk -cu ~~n~~p~~+1G~~ partx -a /dev/sda ########EXT4 ...

  8. LoadRunner 11 安装及破解

    LoadRunner 11 安装及破解   前提条件: 内存:2G,硬盘空闲空间10G,安装完成后实际只占不到2G 支持winXP  SP3;32位与64位win7浏览器支持IE6-8,IE9,fir ...

  9. ubuntukylin14安装ns-allinone-2.35教程(虚拟机ubuntu同理)

    准备材料: 1.ubuntukylin14,百度进官网自行下载: 2.ns-allinone-2.35.tar.gz,百度进官网自行下载: 3.虚拟机:vmwareworkstation(可选). 4 ...

  10. JAVA课程体系

    文件流 单点登录 maven.maven私服 jenkins 小程序 支付 webservice/webapi redis 工作流 权限:shiro 高并发 springBoot dubbo 消息推送 ...