通过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 ...
随机推荐
- study java language
2016.11.30 1).About the Java Technology 2).The Java Language Environment: Contents
- Surprise团队项目总结
Surprise团队项目总结 项目实现情况 实现人人模式:2个用户在同一台电脑上进行切磋下棋,即实现五子棋游戏的基本功能 实现人机模式:初级模式已经实现,可以进行人机交互,但是还没达到智能判断下棋点 ...
- 初识Java-分数录入系统
package classTest; import java.util.Scanner; public class scoreArrangement { /** * 选择界面(main) */ p ...
- 模板方法模式(Template Method)
一.引言 提到模板,大家肯定不免想到生活中的“简历模板”.“论文模板”.“Word中模版文件”等,在现实生活中,模板的概念就是——有一个规定的格式,然后每个人都可以根据自己的需求或情况去更新它,例如简 ...
- HDU1532 网络流:最大流之福德福克森算法
问题描述:约翰是个农民,每次下雨的时候他的庄家总是会被淹没,这就意味着当庄家被水淹后需要很长时间才能重新生长出来,因此,约翰已经建立了一系列排水管道为了使他的庄家尽可能被淹没的最少,也就是说管道的排水 ...
- JS在路径中传中文参数
需要用 encodeURI('中文');处理一下.
- [UI]抽屉菜单DrawerLayout分析(一)
本文转载于:http://www.cnblogs.com/avenwu/archive/2014/04/16/3669367.html 侧拉菜单作为常见的导航交互控件,最开始在没有没有android官 ...
- formData上传图片
---------------------formData上传图片--------------------- <form id="imageform"> <img ...
- 原创跑酷小游戏《Cube Duck Run》 - - 方块鸭快跑
自从unity5出来才开始关注unity,业余时间尝试做了个小游戏: <方块鸭快跑> (Cube Duck Run) 像素风,3d视角,色彩明快,有无尽和关卡两种模式. 应用连接: goo ...
- LeetCode---String
Count and Say 思路:递归求出n - 1时的字符串,然后双指针算出每个字符的次数,拼接在结果后面 public String countAndSay(int n) { if(n == 1) ...