#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. Cantor的数表

    题目描述 如下数列,前5项分别是1/1,1/2,2/1,3/1,2/2…….输入n,输出第n项. 1/1   1/2   1/3   1/4   1/5 2/1   2/2   2/3   2/4 3 ...

  2. debain 8安装为知笔记(how to install wiznote in debain 8)

    刚装了debain8后想安装为知笔记,百度之后发现为知笔记原来是开源软件.代码托管在github上:https://github.com/WizTeam/WizQTClient 但是上面只有Ubunt ...

  3. JavaScript面向对象,及面向对象的特点,和如何构造函数

    1.面向对象和面向过程的区别 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了: 面向对象是把构成问题事务分解成各个对象,建立对象的目的不是 ...

  4. Swift一些数据结构题目的编码实现

    题目:在字符串中找出连续最长的数字串,并把这个串的长度返回:如果长度相同,返回最后一个连续字符串 样例输入abcd12345ed125ss123456789abcd12345ss54321 样例输出输 ...

  5. linux计划任务

    一.单一计划任务 安装at: # yum -y install at 启动: # /etc/init.d/atd start 查看是否运行: # ps aux | grep atd 创建计划 # at ...

  6. Tomcat 在mac中Operation not permitted

    5.执行/Library/Tomcat/bin下的startup.sh,然后打开http://localhost:8080查看是否Tomcat已经启动,若要停止服务器就运行同目录下的shutdown. ...

  7. 【jq】c#零基础学习之路(3)继承和虚方法

    c#只能继承一个基类和多个接口(0+) 父类:Human: class Human { public virtual Move() { Console.WriteLine("Human的虚方 ...

  8. wget 递归下载整个网站

    wget -r -p -np -k http://xxx.com/xxx -r,  --recursive(递归)          specify recursive download.(指定递归下 ...

  9. 数据注解和验证 – ASP.NET MVC 4 系列

           不仅在客户端浏览器中需要执行验证逻辑,在服务器端也需要执行.客户端验证能即时给出一个错误反馈(阻止请求发送至服务器),是时下 Web 应用程序所期望的特性.服务器端验证,主要是因为来自网 ...

  10. Storm进阶

    并行度 在Storm集群中真正运行Topology的主要有三个实体:worker.executor.task,下图是可以表示他们之间的关系. 数据流模型 对于一个Spout或Bolt,都会有多个tas ...