通过JS简单实现图片缩放

#ShowBigImgDiv{position: absolute;z-index: 10001;display: none;cursor: pointer;}
#FullScreenDiv{position: absolute;z-index: 10000;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";
}

简单的实现了图片的缩放功能

时间: 2024-08-29 18:14:59

通过JS简单实现图片缩放的相关文章

JS实现简单的图片轮转

+(UIImage*)createImageFromView:(UIView*)view { //obtain scale CGFloat scale = [UIScreen mainScreen].scale; 开始绘图,下面方法,第一个参数表示区域大小.第二个参数表示是否是非透明的.如果需要显示半透明效果,需要传NO,否则传YES.第三个参数就是屏幕密度了 UIGraphicsBeginImageContextWithOptions(CGSizeMake(view.frame.size.wi

一个简单且丑陋的js切换背景图片基础示例

不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS范例</title> <script type="text/javascript"> function changeBg()

php和js对数据库图片进行等比缩放

JS 对某图片的等比缩放 代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

js简单 图片版时钟,带翻转效果

js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时钟</title> <style type="text/css"> ul,li{ list-style: none; margin: 0; padding: 0; } ul{ position: absolute; left: 2

js最简单焦点图片轮播代码

将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.js"></script> 注意:代码中图片路径修改为你自己的图片地址 var widths=725; //焦点图片宽 var w=0; var widthss=widths+w; var heights=295; //焦点图片高 var heightss=heightss+w; v

开发利器_ImageMagick.基于Linux命令行的图片缩放/编辑/格式转换?

简单介绍: ImageMagick是一系列的用于修改,加工图像的命令行工具,能够快速地使用命令行对图片进行操作,对大量的图片进行批处理,它能执行相当多操作,本文涉及的只是开发中常用的技能. 快速安装: yum -y install epel-release yum install -y ImageMagick ImageMagick-devel 格式转换: convert 1.png 1.jpg 缩放图像: convert 1.jpg -resize 499x 1.jpg 说明: ImageMa

android关于图片缩放

网上有许多关于图片缩放的demo,本人都感觉不怎么好用,最近在github看到了 一个简单的支持多指缩放图片的Android View类 gesture-imageview (地址:https://github.com/jasonpolites/gesture-imageview),感觉还挺好用的,现在写个demo方便以后用于调用 第一步:添加库,推荐直接下载zip,导入工程后,直接将main里的com.polites.android包直接复制到自己的工程中,方便自己以后修改 第二步:由于我只需

jquery.cycle.js简单用法实例

样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width:216px; height:248px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_3.jpg) no-repeat; background-color:#ede1d1; position:relative; padd

PHP图片缩放,裁剪和压缩

Google PageSpeed Insights可以对网页加载速度评分,并给出优化建议 简单来说,优化图片即使用合适尺寸的图片(缩放,裁剪),压缩图片 这里只介绍jpng和png两种图片格式 软件准备: imagemagick apt-get install imagemagick   jpegtran apt-get install libjpeg-turbo-progs   optipng apt-get install optipng pngquant apt-get install p