通过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 ...
随机推荐
- 第六章第一个linux个程序:统计单词个数
第六章第一个linux个程序:统计单词个数 从本章就开始激动人心的时刻——实战,去慢慢揭开linux神秘的面纱.本章的实例是统计一片文章或者一段文字中的单词个数. 第 1 步:建立 Linu x 驱 ...
- kernel/dma.c
/* $Id: dma.c,v 1.5 1992/11/18 02:49:05 root Exp root $ * linux/kernel/dma.c: A DMA channel allocato ...
- IOS 线程处理 子线程
IOS 线程处理 子线程的启动与结束 技术交流新QQ群:414971585 IOS中,如果要在主线程中启动一个子线程,可以又两种方法: [NSThread detachNewThreadSelec ...
- 模块:js实现一个倒计时功能
1.给显示内容加样式 <style> #p1{font-size: large; color: red;} </style> 2.客户端页面 <div id=" ...
- Java数据类型、变量、运算符、语句。
数据类型:整型 int long short byte小数 double float 字符 char 转义字符:\'(单引号字符) \\(反斜杠字符) \n(换行) \r(回车) \t(水平制表符,相 ...
- AFNetworking3.0 Https P12证书
最近服务器由原来的ice中间件改为https.方便了和服务器交互时不用自己aes加密了. -之前服务器人员和我(IOS)都没有使用过https,所以https跑不通很难说是服务器没有配置好还是IOS这 ...
- 「LINUX资料」基础命令概览(一)
- 文件权限及特殊权限管理SUID、SGID和Sticky
文件权限应用模型: 进程的发起者: 进程属主 进程的属组: 进程属组 进程的属主,是否与文件的属主相同,如果相同,进程则以文件属主的权限来访问文件:否则进程的属主所属的组,其中之一是 ...
- HTML 字符实体
原文地址 在 HTML 中,某些字符是预留的. 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签. 如果希望正确地显示预留字符,我们必须在 HTML 源 ...
- python字符串基本操作