• 在webViewDelegate里面添加如下代码:

  • ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    - (void)webViewDidFinishLoad:(UIWebView *)aWebView {
        //调整字号
        NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%'";
        [webView stringByEvaluatingJavaScriptFromString:str];
         
        //js方法遍历图片添加点击事件 返回图片个数
        static  NSString * const jsGetImages =
        @"function getImages(){\
        var objs = document.getElementsByTagName(\"img\");\
                                                 for(var i=0;i<objs.length;i++){\
                                                     objs[i].onclick=function(){\
                                                         document.location=\"myweb:imageClick:\"+this.src;\
                                                     };\
                                                 };\
                                                 return objs.length;\
                                                 };";
         
        [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法
         
        //注入自定义的js方法后别忘了调用 否则不会生效(不调用也一样生效了,,,不明白)
        NSString *resurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];
        //调用js方法
    //    NSLog(@"---调用js方法--%@  %s  jsMehtods_result = %@",self.class,__func__,resurlt);
    }

  • ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
        //将url转换为string
        NSString *requestString = [[request URL] absoluteString];
    //    NSLog(@"requestString is %@",requestString);
         
        //hasPrefix 判断创建的字符串内容是否以pic:字符开始
        if ([requestString hasPrefix:@"myweb:imageClick:"]) {
            NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];
    //        NSLog(@"image url------%@", imageUrl);
             
            if (bgView) {
                //设置不隐藏,还原放大缩小,显示图片
                bgView.hidden = NO;
                imgView.frame = CGRectMake(10, 10, SCREEN_WIDTH-40, 220);
                [imgView setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:LOAD_IMAGE(@"house_moren")];
            }
            else
                [self showBigImage:imageUrl];//创建视图并显示图片
             
            return NO;
        }
        return YES;
    }

  • 创建放大图片的视图

  • ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    #pragma mark 显示大图片
    -(void)showBigImage:(NSString *)imageUrl{
        //创建灰色透明背景,使其背后内容不可操作
        bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
        [bgView setBackgroundColor:[UIColor colorWithRed:0.3
                                                   green:0.3
                                                    blue:0.3
                                                   alpha:0.7]];
        [self.view addSubview:bgView];
         
        //创建边框视图
        UIView *borderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH-20, 240)];
        //将图层的边框设置为圆脚
        borderView.layer.cornerRadius = 8;
        borderView.layer.masksToBounds = YES;
        //给图层添加一个有色边框
        borderView.layer.borderWidth = 8;
        borderView.layer.borderColor = [[UIColor colorWithRed:0.9
                                                        green:0.9
                                                         blue:0.9
                                                        alpha:0.7] CGColor];
        [borderView setCenter:bgView.center];
        [bgView addSubview:borderView];
         
        //创建关闭按钮
        UIButton *closeBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    //    [closeBtn setImage:[UIImage imageNamed:@"close.png"] forState:UIControlStateNormal];
        closeBtn.backgroundColor = [UIColor redColor];
        [closeBtn addTarget:self action:@selector(removeBigImage) forControlEvents:UIControlEventTouchUpInside];
        [closeBtn setFrame:CGRectMake(borderView.frame.origin.x+borderView.frame.size.width-20, borderView.frame.origin.y-6, 26, 27)];
        [bgView addSubview:closeBtn];
         
        //创建显示图像视图
        imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, CGRectGetWidth(borderView.frame)-20, CGRectGetHeight(borderView.frame)-20)];
        imgView.userInteractionEnabled = YES;
        [imgView setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:LOAD_IMAGE(@"house_moren")];
        [borderView addSubview:imgView];
         
        //添加捏合手势
        [imgView addGestureRecognizer:[[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(handlePinch:)]];
         
    }

  • 实现关闭和捏合手势的方法

  • ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //关闭按钮
    -(void)removeBigImage
    {
        bgView.hidden = YES;
    }
    - (void) handlePinch:(UIPinchGestureRecognizer*) recognizer
    {
        //缩放:设置缩放比例
        recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);
        recognizer.scale = 1;
    }

效果图如下

<div>
<img width="320.000000" height="300.000000" src="http://114.215.171.217:80/image/f?fileName=null_1436866458461.jpg" οnclick="imageClick()">
<script type="text/javascript">
function imageClick(){document.location = "ClickImage:"}
</script>
<br />
</div>

附上我的html代码

http://my.oschina.net/linxiaoxi1993/blog/465905?p={{page}}

转载于:https://www.cnblogs.com/zxykit/p/5275581.html

WebView点击图片看大图效果相关推荐

  1. php图片点击查看大图,jQuery点击小图看大图,大图查看内容详情所有图片

    jQuery点击小图看大图,大图查看内容详情所有图片: html代码如下: × < > CSS代码如下: * { margin:0; padding:0; } body { overflo ...

  2. Android点击WebView中的图片查看大图

    Android点击WebView中的图片查看大图 WebView加载Html文本加载图片并同时实现获取图片下标 首先加载html文本 web_view.loadDataWithBaseURL(null ...

  3. 推荐一款jquery前端插件(zoomify),灯箱效果插件(用于图片看大图的效果),简单易用!

    前段时间项目中,需要使用图片看大图的效果,主要是用于上传的企业工商执照等信息.这个时候的需求是希望放大图片,看到大图.在进行认真调研基础上发现了一款极好用.极简单的前端插件 zoomify,下面简单介 ...

  4. JQuery实现点击缩略图查看大图效果

    点击缩略图查看大图效果,这里存在一个如何获取图片真实大小的问题.在手机端页面,插入的图片大小都是按照图片的原始尺寸在展示的,如果图片太大完全超出手机的屏幕尺寸 ,我们的bootstrap响应式针对图片 ...

  5. 点击图片显示大图(有多张图片可以左右滑动)

    需求:项目中用到了就是在列表展示的时候会出现图片,点击图片展示大图. 思路:用dialog来实现.因为这里在列表里会用到,点击进入动态详情也会用到,所以直接写进工具类. 上代码: 全屏显示在于参数后面 ...

  6. 通过js实现图片左右点击图片左右切换效果

                                                通过js实现图片左右点击图片左右切换效果 通过图片左右的点击实现图片的左右切换,其实先看一下代码吧() 这边HT ...

  7. 基于JavaScript实现移动端点击图片查看大图点击大图隐藏

    今天找到了一个我用了很好的方法,点击缩略图,放大居中展示,且参数可调,亲测可靠. 代码使用意见,将下面的代码放到本地测试效果,可以用一张自己的照片,点击会放大,再次点击还原. 一.需求  点击图片查看 ...

  8. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览    源码下载 实现的代码. html代码: <div class=&qu ...

  9. html点击小图标显示全屏查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏...

    一.需求 点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof .exampleImg { height:100 ...

最新文章

  1. C语言如何实现随机打印24个母,菜鸟求助,写一个随机输出26个英文字母的程序...
  2. windows下重启mysql数据库_windows下重启mysql的方法
  3. 让AngularJS的$http 服务像jQuery.ajax()一样工作
  4. hdu-2553 N皇后问题(深搜 + 状态压缩)
  5. 浅谈企业MES与ERP系统集成
  6. centos7 redis5.0以前版本 集群部署示例 - 第一篇
  7. 使用Spring Integration轮询http端点
  8. SCI、Ei投稿指南
  9. 同一个类里方法互相调用注解失效问题
  10. SpringBoot自定义注解接收json参数
  11. JAVA虚拟机——利用javap反编译class文件分析代码执行过程
  12. Linux 分区简介
  13. PHP之Trait详解
  14. scrapy爬取统计局的城乡代码,以目录文件夹形式生成,同时最后保存在excel中
  15. 批量读取word docx文件指定表格内容,保存在excel文件中
  16. oracle临时表空间占用率过高,ORACLE 临时表空间使用率过高的原因及解决方案
  17. 主从D触发器的电路结构和工作原理
  18. C#笔记5//建造游戏1/网格地图脚本1/自编/仅创建网格/无需插件
  19. 纳什均衡C++简单实现
  20. USB 驱动程序(转贴)

热门文章

  1. 神经网络初始化trick:大神何凯明教你如何训练网络!
  2. sql 孩子兄弟表示法 所有子节点_matlab实现随机+蓄意攻击网络节点(1)
  3. 深入dos编程_编程入门先要学什么?打怪升级走起来!
  4. 关闭word_记一次毕设消失事件始末,及mac+word文档消失恢复方法汇总
  5. Jenkins时区设置为北京时间
  6. SpringBoot面试题第一弹
  7. IDEA06 代码规范检测插件之Alibaba Java Coding Guidelines
  8. Java中调用文件中所有bat脚本
  9. Android软件测试Monkey测试工具
  10. nefu 519 昨日重现