精华内容
参与话题
问答
  • 点击图片显示放大图片,并悬浮于窗体之上
    <a  href='javascript:void(0);' οnclick='picBig();'>
                                    <img src="(图片地址)"> style="width: 200px;height: 200px"></a>
                                    <!--为要放大的图片设置超链接(点击显示大图)-->
    <div id="divCenter" align="center"
                                       style="position: absolute; display: none;  width: 100%; height: 1                                        00%;   position:fixed;z-index:25;">
                                            <img
                                                    src="<%=request.getContextPath()%>/showImage?imageId=<%=bill.getF_FILE_ID()%>" style="width:70%;height: 80%"/>
                                                    <div style="margin-top: 30px;"><a href="javascript:void(0);" οnclick="picClose();" class="close_photo">关闭</a></div>
                                    </div>
              <!--要显示的大图,把该div放置到要显示的地方。并把display设置为none使之隐藏-->
    通过js使得原来隐藏的div显示出来
    <script>
    function picBig() {
                    var v = document.getElementById('divCenter');
                    v.style.display = "block";
                  
                }
                function picClose() {
                    var v = document.getElementById('divCenter');
                    v.style.display = "none";
                }
    </script>
    展开全文
  • 点击放大图片

    2019-09-22 11:10:22
    //创建button遮挡 UIButton *cover = [[UIButton alloc]initWithFrame:self.view.frame]; [cover setBackgroundColor:[UIColor blackColor]]; cover.alpha = 0; [self.view addSubview:cover]; [cov...

    //创建button遮挡
    UIButton *cover = [[UIButton alloc]initWithFrame:self.view.frame];
    [cover setBackgroundColor:[UIColor blackColor]];
    cover.alpha = 0;
    [self.view addSubview:cover];
    [cover addTarget:self action:@selector(smallImg) forControlEvents:UIControlEventTouchUpInside];
    self.cover = cover;

    //image提前
    [self.view bringSubviewToFront:self.iconBtn];
    //改变frame
    [UIView animateWithDuration:0.25 animations:^{
    CGFloat w = self.view.frame.size.width;
    CGFloat y = (self.view.frame.size.height - w) * 0.5;
    self.iconBtn.frame = CGRectMake(0, y, w, w);
    cover.alpha = 0.7;
    }];

     

     

    - (void)smallImg{

        

        //改frame

        [UIView animateWithDuration:0.25 animations:^{

            self.iconBtn.frame = self.rect;

            self.cover.alpha = 0;

        }];

        //移除cover

        [self.cover removeFromSuperview];

        self.cover = nil;

        

    }

    转载于:https://www.cnblogs.com/yangmx/p/4077827.html

    展开全文
  • 放大页面图片

    2020-02-12 12:11:14
    图片放大思路如下: 1、加载页面时,为图片添加点击事件; 2、点击图片,执行expandPhoto()方法,该方法在页面添加div,用于展示放大后的图片; 3、点击大图,执行retore()方法,该方法用于移除展示大图的div。...

    在CSDN参考的一篇文章,但是那篇文章失效了(所以没有贴链接)。

    原代码无法正确展示图片,是存在问题的,个人对原代码有调整修改。

    图片放大思路如下:

    1、加载页面时,为图片添加点击事件;

    2、点击图片,执行expandPhoto()方法,该方法在页面添加div,用于展示放大后的图片;

    3、点击大图,执行retore()方法,该方法用于移除展示大图的div。具体代码如下:

    <!DOCTYPE html>
    <html lang="gbk">
    <head>
    	<meta charset="gbk">
    </head>
    <style>
    img {
      cursor: -webkit-zoom-in;
      cursor: zoom-in;
    }
    img:hover:not(.active) {
      opacity: .8;
    }
    img.active {
      cursor: -webkit-zoom-out;
      cursor: zoom-out;
    }
    .overlay{
        background-color:#000;
        opacity: 1;
        position: fixed;
        top:10%;
        left:10%;
        width:90%;
        height:90%;
        z-index: 10;
        text-align: center;
    }
    .overlayimg{
        position: absolute;
        left: 0%;
        width: 100%;
        height:100%;
    }
    </style>
    <script>
    	//放大图片
        function expandPhoto(){
            var overlay = document.createElement("div");
            overlay.setAttribute("id","overlay");
            overlay.setAttribute("class","overlay");
            document.body.appendChild(overlay);
    
            var img = document.createElement("img");
            img.setAttribute("class","overlayimg active");
            img.setAttribute("title","点击返回");
            img.src = this.getAttribute("src");
            document.getElementById("overlay").appendChild(img);
    
            img.onclick = restore;
        }
    	//回复图片
        function restore(){
            document.body.removeChild(document.getElementById("overlay"));
        }
    	//为图片元素添加点击事件
        window.onload = function(){
            var imgs = document.getElementsByTagName("img");
            if(imgs.length>0){
                imgs[0].focus();
                for(var i = 0;i<imgs.length;i++){
                    imgs[i].onclick = expandPhoto;
                    imgs[i].onkeydown = expandPhoto;
                }
            }
        }
    </script>
    <body>
    	<img class="lazy" style="width:100px;height:100px;" src="Koala.jpg" title="点击查看大图"/>	
    </body>
    </html>
    

     

    展开全文
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;测试dome&lt;/title&gt; &... p

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>测试dome</title> 
    <style>
    #modal {
    	display: none;
    }
    .modal {
        margin: auto;
        padding-top: 18%;
        width: 50%;
        height: 80%;
        z-index: 1;
    }
    .modal img {
        animation-name: zoom;
    	animation-duration: 0.6s;
        display: block;
        padding: 10px;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
        box-shadow: 0 2px 6px rgb(0, 0, 0, 0), 0 10px 20px rgb(0, 0, 0, 0);
        border-radius: 12px;
        border: 1px solid white;
    }
    @keyframes zoom {
        from {transform: scale(0.1)}
        to {transform: scale(1)}
    }
    .thum-img {
        float: left;
        width: 200px;
        height: 200px;
        margin: auto;
        display: block;
        padding: 40px;
    }
    </style>
    	</head>
    <body>
    <!-- 先来实现弹窗 -->
    <div style='position:fixed;width:80%;height:80%;background-color:rgb(0,0,0,0)' id='modal'>
    	<div class='modal' id='modalw'>
    		<img id='bgImg' />
    	</div>
    </div>
    
    
    <!-- 下面则是主页内容,先只给几个图片 -->
    
    <div>
     	<img class='thum-img' src='http://p1.so.qhimgs1.com/bdr/594__/t0122d25a4955155da1.jpg' onclick='showBgImg(this)'/> 
        <img class='thum-img' src='http://p0.so.qhimgs1.com/bdr/864__/t0195c425d4062ecbf0.jpg' onclick='showBgImg(this)'/>
        <img class='thum-img' src='http://p2.so.qhimgs1.com/bdr/675__/t01dcb0fdb0bd6f477e.jpg' onclick='showBgImg(this)'/>
        <img class='thum-img' src='http://img1c.xgo-img.com.cn/pics/1594/1593863.jpg' onclick='showBgImg(this)'/>
    </div>
    
    <script>
        var modal = document.getElementById('modal');
    	var modalw= document.getElementById('modalw');
        var bgImg = document.getElementById('bgImg');
    
    
        function showBgImg(e) {
    		modal.style.display = 'block';
    		modalw.style.display = 'block';
    		bgImg.src = e.src;
    	}
    
    	bgImg.onclick = function() {
    		modalw.style.display = 'none';
    		modal.style.display = 'none';
    	}
    </script>
    </body>
    </html>

     

    展开全文
  • js点击图片进行放大

    2019-05-05 14:08:43
    最简单的一种方式就是在图片的外层包上a便签,当点击的时候,相当于是跳转了这个图片路径。 <a target="_Blank" href = "'+res.tp1+'" ><img src="'+res.tp1+'" id="tp1" class ="zp" style="margin-left...
  • html放大图片

    2019-02-11 15:51:52
    【用html放大图片】 Kristen and wjk
  • 实现点击图片放大查看功能

    千次阅读 2019-05-29 11:58:07
    1.html 代码 <div id="imgEnlargeDiv" style="display: none; text-align: center;position: fixed;z-index: 1000;top: 0;left: 0; width: 100%;...background-color: rgba(255,255,255,.9);......
  • web页面图片放大

    2019-12-25 17:57:59
    文章目录图片放大 方式一图片放大 方式二 图片放大 方式一 借鉴于 https://blog.csdn.net/Lxinccode/article/details/80353060 <div class="evidenceImgDiv"> <img src=...
  • 今天的错误及感悟放大镜? 放大镜? 今天老师让模拟一个淘宝图片放大镜的效果
  • jsp中点击放大图片

    千次阅读 2017-08-31 19:40:45
    页面代码: String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> ... 放大图片
  • halcon中放大图片

    2019-04-28 15:26:09
    halcon中放大图片 Halcon从某一个图片以指定区域绘制到另一个图像 Author: LiGuangyu Date: 2018-02-26 在Halcon中找了很多次都没找到这种算子,后来自己想出来的一个办法 *读取图像 read_image(Image, ‘fabrik...
  • HTML 代码 &lt;div id="outerdiv" style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0; width: 100%;height: 100%;background-color: rgba(255,255,255,.9);.../...
  • php缩小和放大图片(缩放图片)

    千次阅读 2019-09-26 12:08:24
    list($width, $height)=getimagesize($filename); //缩放比例 $per=round(400/$width,3); $n_w=$width*$per; $n_h=$height*$per; $new=imagecreatetruecolor($n_w, $n_h);...$img=imagecreatefromjpeg($filename);...
  • js点击放大图片

    千次阅读 2017-03-02 16:03:02
    js代码: 店铺门面照片(1张) ${businessDetail.storeImg }" name="storeImg" id="storeImg"> <input size="30"
  • 点击图片实现放大图片

    千次阅读 2018-08-09 10:13:10
    思路为:img上面添加onclick,并将当前src当做参数传递,然后在方法中打开模态框 html代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="...
  • vue实现点击图片放大图片

    万次阅读 2018-10-08 09:11:25
    使用vue一个组件vue-directive-image-previewer A Vue.js project for tag img, click img to zoom out to full screen. 安装vue-directive-image-previewer 命令行 npm install vue-directive-image-previewer ...
  • python批量放大图片

    千次阅读 2018-06-23 17:26:11
    在尝试Tesseract-OCR 对图片进行字符识别,训练样本的时候,发现直接截下来的图识别成功率不高,而放大图片后效果会改善,所以写了如下代码,能够对文件夹下图片进行判别,并批量将其放大为想要的大小。
  • 又学习了一个小demo,并运用到了后台的管理系统中。 直接上代码吧 &lt;div class="img-list-box"&gt; &lt;div class="img-select"&gt; &lt;...&
  • 鼠标悬浮放大图片的具体实现

    千次阅读 2018-07-15 23:21:48
    代码实现:&lt;img src="${trexpert.picture}" alt="头像" width="20" height="20" class="apreview" title="... // 图片距离鼠标的位
  • 猫猫分享,必须精品原创文章,欢迎转载。转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243一:...#import "NYViewController.h"//图片的高度 const CGFloat NYTopViewH = 350;@interface NYViewContro

空空如也

1 2 3 4 5 ... 20
收藏数 132,459
精华内容 52,983
关键字:

放大图片