iOS仿今日头条新闻详情的图片点击浏览

效果

思路:

1. webview加载url,js交互图片插入点击事件、获取图片数组和图片宽高比数组.

2.点击webview上的图片,计算图片在Windows上的位置,添加UIImageView到Windows上然后动画全屏显示,动画结束后使用三方的图片浏览

3.当三方的图片浏览消失后,判断浏览的最后一张图片是否是第一次点击的图片,如果是动画返回原来的位置后移除,不是动画透明消失后移除


1.插入js代码,给图片添加点击事件

    [webViewstringByEvaluatingJavaScriptFromString:@"\

     function assignImageClickAction(){\

     var imgs=document.getElementsByTagName('img');\

     var length=imgs.length;\

     for(var i=0; i < length;i++){\

     img=imgs[i];\

     if(\"ad\" ==img.getAttribute(\"flag\")){\

     var parent = this.parentNode;\

     if(parent.nodeName.toLowerCase() != \"a\")\

     return;\

     }\

     img.onclick=function(){\

     getImage(this.src,this.getBoundingClientRect().top,this.clientWidth/this.clientHeight );\

     }\

     }\

     };\

     assignImageClickAction();"];

    //插入js代码,获取所有图片宽高比

    id object = [webView stringByEvaluatingJavaScriptFromString:@"\

                 function getImages(){\

                 var objs = document.getElementsByTagName(\"img\");\

                 var imgScr = '';\

                 for(var i=0;i

                 if(i === objs.length-1) \

                 imgScr = imgScr + objs[i].src;\

                 else\

                 imgScr = imgScr + objs[i].src + '+';\

                 };\

                 return imgScr;\

                 };\

                 getImages();" ] ;

    self.imageArray = [NSMutableArray arrayWithArray:[object componentsSeparatedByString:@"+"]];


    //插入js代码,获取所有图片

    id object1 = [webView stringByEvaluatingJavaScriptFromString:@"\

                 function getImages(){\

                 var objs = document.getElementsByTagName(\"img\");\

                 var imgScr = '';\

                 for(var i=0;i

                 if(i === objs.length-1) \

                 imgScr = imgScr + objs[i].clientWidth/objs[i].clientHeight;\

                 else\

                 imgScr = imgScr + objs[i].clientWidth/objs[i].clientHeight + '+';\

                 };\

                 return imgScr;\

                 };\

                 getImages();" ] ;

    self.WHArray = [NSMutableArray arrayWithArray:[object1 componentsSeparatedByString:@"+"]];


2.计算位置、显示图片浏览

 __weak typeof(self) weakSelf = self;

    self.context[@"getImage"] = ^(){

        NSArray*args = [JSContextcurrentArguments];

        dispatch_async(dispatch_get_main_queue(), ^{

           weakSelf.bigImage_url= [NSStringstringWithFormat:@"%@",args[0]];

            CGFloat y = [[NSStringstringWithFormat:@"%@",args[1]]floatValue]+self.commentariesTableView.y-self->consetY+Navigation_height;

            CGFloath = (WIDTH-30)/[[NSStringstringWithFormat:@"%@",args[2]]floatValue];

            weakSelf.bigImage_rect=CGRectMake(15, y,WIDTH-30, h);

            weakSelf.bigImageView= [[UIImageViewalloc]initWithFrame:weakSelf.bigImage_rect];

            [weakSelf.bigImageViewsd_setImageWithURL:[NSURLURLWithString:weakSelf.bigImage_url]];

            [WINDOWS_ViewaddSubview:weakSelf.bigImageView];

            CGFloath1 =WIDTH/[[NSStringstringWithFormat:@"%@",args[2]]floatValue];

            [UIView animateWithDuration:0.5 animations:^{

                weakSelf.bigImageView.frame=CGRectMake(0, (HEIGHT- h1)/2,WIDTH, h1);

            }completion:^(BOOLfinished) {

                weakSelf.view.userInteractionEnabled=YES;

                HZPhotoBrowser*browserVc = [[HZPhotoBrowseralloc]init];

                browserVc.imageCount= weakSelf.imageArray.count;// 图片总数

                browserVc.currentImageIndex= [weakSelf.imageArrayindexOfObject:weakSelf.bigImage_url];//当前点击的图片

                browserVc.delegate= weakSelf;

                [browserVcshow];

            }];

        });

    };


3.移除

//图片浏览移除后 imageview消失移除

- (void)dismissViewControllerIndex:(NSInteger)tag {

    if (tag == [self.imageArray indexOfObject:self.bigImage_url]) {

        [UIView animateWithDuration:0.5 animations:^{

            self.bigImageView.frame = self.bigImage_rect;

        }completion:^(BOOLfinished) {

            [self.bigImageView removeFromSuperview];

        }];

    }else{

        [UIView animateWithDuration:0.5 animations:^{

            self.bigImageView.alpha=0;

        }completion:^(BOOLfinished) {

            [self.bigImageView removeFromSuperview];

        }];

    }

}

//图片浏览滑动后imageview的位置修改

- (void)didScrollviewCurrentIndex:(NSInteger)index {

    CGFloatw =WIDTH;

    CGFloath = w/[self.WHArray[index]floatValue];

    CGFloatx =0;

    CGFloaty = (HEIGHT- h)/2;

    [self.bigImageView sd_setImageWithURL:[NSURL URLWithString:self.imageArray[index]]];

    self.bigImageView.frame=CGRectMake(x, y, w, h);

}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容