#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. [读书笔记]Java之动态分派

    以下内容来自周志明的<深入理解Java虚拟机>. 前一篇说了静态分派和重载有关,现在的动态分派就和覆盖Override有关了. 先看代码: public class DynamicDisp ...

  2. css常用公共样式

    /*style reset*/ body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,form,input,textarea,select{padding:0; margin:0;fon ...

  3. Spring可以将简单的组件配置

    这次听了老师的课程,觉得还是需要更加集中的去把各种题进行一个分类吧,然后有针对的去准备,虽然据说这一块在面试中也不容易考到,但是毕竟是难点,还是需要好好准备一下的.因为在dp这个方面,我算是一个比较新 ...

  4. 浏览器功能记住账号和密码解决方法(HTML解决方式)

    1.在input标签里应用html5的新特性autocomplete="off"  注:对chrome不管用.其他浏览器没试. 2.如果是一个输入框那就在当前input标签后面(一 ...

  5. mybatis:Invalid bound statement (not found)

    [常规解决办法] 如果出现: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 一般的原因 ...

  6. 写一些封装part1 (事件绑定移除,圆形矩形碰撞检测)

    var EventHandle = { addEvent:function(ele,type,handle){ if (ele.addEventListener) { ele.addEventList ...

  7. USB

    [一].USB(Universal Serial Bus):是通用串行总线的缩写,具有方便易用,动态分配带宽,容错性优越和高性价比等特点. USB接口设备结构分:USB Host(主机)和USB De ...

  8. Getting Real 开发宝典

       此书是管理者.程序员或设计师必学的宝典.它以更小的规模,更快的速度,更高的质量来完成软件开发,使产品更简单.粗暴(精致).      近百条精炼总结,不要奢望一次全部记住或理解,只要能理解或做到 ...

  9. MSXML使用教程

    在DOM接口规范中,有四个基本的接口:Document,Node,NodeList以及NamedNodeMap.在这四个基本接口中,Document接口是对文档进行操作的入口,它是从Node接口继承过 ...

  10. XMLHttpRequest

    XMLHttpRequest对象的方法 abort() 取消当前所发出的请求 getAllResponseHeaders() 取得所有的HTTP头信息 getResponseHeader() 取得一个 ...