通过JS简单实现图片缩放
#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简单实现图片缩放的更多相关文章
- Android 简单的图片缩放方法
很简单的一个图片缩放方法,注意要比例设置正确否则可能会内存溢出 相关问题 java.lang.IllegalArgumentException: bitmap size exceeds 32bits ...
- JS简单实现图片切换
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- js 滚轮控制图片缩放大小和拖动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS- XKZoomingView 简单的图片缩放预览,支持横屏、长图【手势:单击、双击、放大缩小】
XKZoomingView.h #import <UIKit/UIKit.h> @interface XKZoomingView : UIScrollView /** 本地图片 */ @p ...
- JS简单的图片左右滚动
<div id="scroll" style="overflow:hidden;width:757px;"> <table cellpaddi ...
- JS实现等比例缩放图片
JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- HTML5 图片缩放功能
腾讯新闻上用的插件(xw.qq.com) 缩放插件scale.js (function(window, undefined) { var document = window.document, sup ...
随机推荐
- SDWebImageManager.m:244:22: Too many arguments to function call, expected 0,have 5
SDWebImageManager.m:244:22: Too many arguments to function call, expected 0,have 5选中项目 Build Setting ...
- 今天第一次接触到typescript,看了第一个知识点就是变量的声明,来回忆回忆,做做笔记
以前只用过JavaScript原生写网站特效,今天还是第一次听说typescript的,然后看了一下它的基本知识,感觉很像Java,真的太像了,但是又有不同点.很让我惊奇看到的第一个知识点就和以前不同 ...
- linux部署不同版本mysql
测试环境部署过程中经常会遇到同一个服务器上部署两个不同版本的mysql数据库,在部署过程中也会有各种各样的问题,现将部署多版本mysql的方法总结如下: 1.下载mysql版本 http://down ...
- Windows 10 安装TA-Lib python库
由于需要和朋友比对一个结果,需要在Windows 10中安装TA-Lib库,写点简单的python代码. 本来以为就简单的执行下pip install TA-Lib就OK了. 然后,安装失败: fat ...
- linq之将IEnumerable<T>类型的集合转换为DataTable类型 (转载)
在考虑将表格数据导出成excel的时候,网上搜的时候找到一个特别合适的公共方法,可以将query查询出来的集合转换为datatable 需引用using System.Reflection; publ ...
- Android——播放器和图片轮播
layout文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...
- 十分钟搞定微信企业帐号“echostr校验失败,请您检查是否正确解密并输出明文echostr”
问题域:在这里我们只解决密文可以正确解密,但微信验证提示“echostr校验失败,请您检查是否正确解密并输出明文echostr”的问题. 干货:没有正确验证的原因是:你给微信返回的是字符串,而微信需要 ...
- Android studio 快捷键(Mac)
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- oracle数据库从入门到精通
oracle产品线围绕企业开发平台的企业开发平台四大组件:unix,weblogic中间件,java编程语言,oracle数据库oracle 开发主要分两类数据库管理:dba数据库编程:分两部分 ...
- XML 增删查改
<?xml version="1.0" encoding="utf-8"?> <users> <person name=" ...