UIWebView 点击查看大图

UIWebView 点击查看大图

UIWebView 点击查看大图,参考示例如下:

ShowBigImgViewController.h

#import <UIKit/UIKit.h>

@interface ShowBigImgViewController : UIViewController

//UIWebView
@property (weak, nonatomic) IBOutlet UIWebView *webDetails;

@end

ShowBigImgViewController.m

#import "ShowBigImgViewController.h"
#import "UIImageView+AFNetworking.h"

#define K_VIEW_DETAILS_URL @"http://3g.fx678.com/news"

@interface ShowBigImgViewController ()<UIGestureRecognizerDelegate>

@end

@implementation ShowBigImgViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //[S]设置网页显示内容
    NSURL *url = [NSURL URLWithString:K_VIEW_DETAILS_URL];
    [self.webDetails loadRequest:[[NSURLRequest alloc] initWithURL:url cachePolicy:NSURLRequestReloadIgnoringLocalCacheData timeoutInterval:15.0f]];
    //[E]设置网页显示内容

    //[S]添加点击事件
    UITapGestureRecognizer *webTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)];
    [self.webDetails addGestureRecognizer:webTap];
    webTap.delegate = self;
    webTap.cancelsTouchesInView = NO;
    //[E]添加点击事件

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - UIGestureRecognizer Delegate
-(BOOL) gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{

    return YES;

}

#pragma mark - Custom method
//根据点击的位置 获取原始图片地址
-(void) handleSingleTap:(UITapGestureRecognizer *) sender{

    CGPoint point =[sender locationInView:self.webDetails];

    NSString *strImgUrl = [NSString stringWithFormat:@"document.elementFromPoint(%f,%f).src;",point.x,point.y];
    strImgUrl = [self.webDetails stringByEvaluatingJavaScriptFromString:strImgUrl];
    if (![strImgUrl isEqualToString:@""])
        [self showBigImage:strImgUrl withPoint:point];

    int len = [self getHistorysLength];
    if (len > 0) {
        //头部导航栏添加返回按钮
        UIBarButtonItem *leftBarBtn = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"but_back"] style:UIBarButtonItemStyleDone target:self action:@selector(returnDetails:)];
        self.navigationItem.leftBarButtonItem = leftBarBtn;
    }else
        self.navigationItem.leftBarButtonItem = nil;

    NSLog(@"strImgUrl:%@",strImgUrl);

}

//显示大图
-(void) showBigImage:(NSString *) strUrl withPoint:(CGPoint) point{

    if (![strUrl isEqualToString:@""]) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(point.x, point.y, 0, 0)];
        [imageView setImageWithURL:[NSURL URLWithString:strUrl]];

        [self.view addSubview:imageView];
        [self.view bringSubviewToFront:imageView];  //最顶端

        [UIView animateWithDuration:.50f animations:^{
            imageView.frame = [[UIScreen mainScreen] bounds];
            imageView.center = self.view.center;
        } completion:^(BOOL finished) {
            //自适应屏幕
            imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

            imageView.userInteractionEnabled = YES; //否则图片点击不了
        }];

        //添加点击事件缩小
        UITapGestureRecognizer *tapClick = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideBigImage:)];
        [imageView addGestureRecognizer:tapClick];

        //隐藏头部导航栏
        self.navigationController.navigationBarHidden = YES;
    }

}

//隐藏大图
-(void) hideBigImage:(UITapGestureRecognizer *) sender{

    if ([sender.view isKindOfClass:[UIImageView class]]) {

        UIImageView *imageView = (UIImageView *)sender.view;
        CGPoint point = [sender locationInView:self.view];

        [UIView animateWithDuration:.35 animations:^{
            CGRect rect = imageView.frame;
            rect.origin = point;
            rect.size = CGSizeZero;
            imageView.frame = rect;
        } completion:^(BOOL finished) {
            //移除
            [imageView removeFromSuperview];
        }];
    }

    //显示头部导航栏
    self.navigationController.navigationBarHidden = NO;

}

#pragma mark - UIWebView histors
//返回
-(void) returnDetails:(UIBarButtonItem *)sender{

    NSString *strHistory = nil;
    int len = [self getHistorysLength];
    if (len > 0) {
        //返回
        strHistory = @"window.history.back();";
        [self.webDetails stringByEvaluatingJavaScriptFromString:strHistory];

        NSLog(@"存在历史记录,可以返回!%d",len);
    }else{
        self.navigationItem.leftBarButtonItem = nil;

        NSLog(@"不存在历史记录");
    }

}

//获取历史记录数
-(int) getHistorysLength{

    NSString *strHistory = @"window.history.length;";
    return [[self.webDetails stringByEvaluatingJavaScriptFromString:strHistory] intValue];
}
@end

以上案例制作,code4app.com 源码网提供了大量帮助以示感谢

案例源码下载地址:

http://pan.baidu.com/s/1i3CionV

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-29 08:00:03

UIWebView 点击查看大图的相关文章

iOS点击查看大图的动画效果

对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了

微信JSSDK上传多图预览,点击查看大图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="ap

点击查看大图Activity

1.使用方式 Intent intent = new Intent(FriendCircleActivity.this, ImageGralleryPagerActivity.class);//0,索引,第几张图片 intent.putExtra(ImageGralleryPagerActivity.EXTRA_IMAGE_INDEX, 0); ArrayList<String> imgs = new ArrayList<String>(); imgs.add("图片UR

WKWebview点击图片查看大图

大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其实很简单,给WKWebview写个类别,添加两个方法就行了,然后在WKWebview的两个协议中调用下这两个方法就行了 首先声明个数组来接收图片数组,可是有个问题,那就是类别是声明不了属性的,那怎么办呢?我们可以通过runtime来设置属性,runtime非常有用,我们以后的篇章会说到. stati

移动端点击图片查看大图

一.需求 点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css">

android开发:点击缩略图查看大图

android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景).另一种就是直接打开一个新的activity显示大图. 1.第一种方法我们可以使用自定义的AlertDialog来实现,代码如下: ImageView image=(ImageView)findViewById(R.id.small_image); image.setOnClickListener(new OnClickListener() { // 点击放大 p

即拿即用-选择头像,可以选择相册,拍照,查看大图,保存到本地

如图所示: 显示图片用的是Glide 选择图片用的是GalleryFinal 查看大图用的是PhotView 圆形图片用的是SelectableRoundedImageView GitHub地址:https://github.com/mocn26169/Avatar 核心代码: 点击选择图片 @Override public void onClick(View v) { switch (v.getId()) { case R.id.avatar: if (!TextUtils.isEmpty(u

Android下QQ空间查看大图特效

最近在做一个项目,里面有一个功能是实现Android QQ好友动态里面的缩略图放大,查看大图的效果.用过都知道,这个特效很赞的,没用过的下载个玩玩吧.我刚开始以为放大的那个大图是一个Activity或者是一个Dialog.可是尝试过后发现怎么也实现不了那种效果(有实现出来的朋友的话还请相告,一起交流交流).然后到android官网上发现了一个图片放大特效的demo.这个Demo确实是实现了QQ里面图片放大的基本效果,可是要求是Android 3.0以上才能用,因为里面用到Animator.我知道

jQuery-点击查看联系方式

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>其他事件one</t