新闻详情页顶部的下拉放大与上拉的层叠效果

条件一:  [self.view insertSubview:_imgView belowSubview:_tableView];

条件二:

static NSString *cellId = @"cell1";

cell = [tableView dequeueReusableCellWithIdentifier:cellId];

if (!cell)

{

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellId];

cell.selectionStyle = UITableViewCellSelectionStyleNone;

//不能重用,且底部要保持透明

cell.backgroundColor = [UIColor clearColor];

cell.contentView.backgroundColor = [UIColor clearColor];

}

条件三  :- (void)scrollViewDidScroll:(UIScrollView *)scrollview {

CGFloat offsetY = scrollview.contentOffset.y;

if (offsetY > 0) {  //往上滑动改变图片的 y 值

_imgView.top = -offsetY*0.5;

} else {

//向下滑动时放大图片且 y 值保持不变

//原始宽度/原始高度 = 现在宽度/现在高度

//现在的高度

//ABS()取绝对值

CGFloat height = SCREEN_WIDTH + ABS(offsetY);

//现在宽度

CGFloat width = SCREEN_WIDTH/(CGFloat)SCREEN_WIDTH * height;

topImgFrm = _imgView.frame;

topImgFrm = CGRectMake(-(width-SCREEN_WIDTH)/2.0, 0, width, height);

_imgView.frame = topImgFrm;

}

}

时间: 2024-10-12 21:26:39

新闻详情页顶部的下拉放大与上拉的层叠效果的相关文章

Material Design之利用CollapsingToolbarLayout轻松实现知乎日报新闻详情页顶部效果(带banner的toolbar伸缩折叠效果)

我们都知道CoordinatorLayout+AppBarLayout可以轻松实现滚动隐藏ToolBar的效果,今天我们要讲的是CollapsingToolbarLayout+ CoordinatorLayout+AppBarLayout实现带Banner的Toolbar折叠效果----向上滚动时,Banner会随着滚动手势向上收缩至隐藏,Banner上 的文字(实际上是CollapsingToolbarLayout上的文字)会逐渐缩小最后显示在Toolbar上,向下滚动时,Banner会逐渐显

[ionic开源项目教程] - 第9讲 新闻详情页的实现

目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项目教程] 第3讲 使用Tabs和SlideBox实现左右滑动菜单 [ionic开源项目教程] 第4讲 通过Service层获取新闻列表 [ionic开源项目教程] 第5讲 如何在项目中使用全局配置 [ionic开源项目教程] 第6讲 过滤器filter的使用 [ionic开源项目教程] 第7讲 实现

[ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化

目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项目教程] 第3讲 使用Tabs和SlideBox实现左右滑动菜单 [ionic开源项目教程] 第4讲 通过Service层获取新闻列表 [ionic开源项目教程] 第5讲 如何在项目中使用全局配置 [ionic开源项目教程] 第6讲 过滤器filter的使用 [ionic开源项目教程] 第7讲 实现

7、UmbracoNewsSite:新闻详情页

这一篇我们创建一个新闻详情页文档类型,然后尝试编辑新闻内容. 首先确定新闻详情页需要什么?应该有新闻标题.新闻内容.新闻简介.新闻缩略图:其中后两个是为了在新闻列表展示该新闻信息设置的.确定了这些,现在就可以开始编写了. 打开Document Types节点新建一个名为News Post的新文档类型,Master Document Type同样选择none…. 然后分别设置需要的几个属性:注意用来设置新闻内容的属性Content的数据类型设置为Richtext Editor(富文本编辑器);其次

网易新闻客户端iOS版本中新闻详情页(UIWebView)技术实现的分析探讨

本篇博客背景:1:本人是网易新闻app的忠实用户,大约每天有2~3个小时的使用时间.2:在如此频繁且长时间的使用过程中,几乎没有遇到过闪退的情况.不得不佩服人家优化的效果之好,也不得不感叹自己和大牛之间的差距之大.(不是做广告..是真爱..)3:一直都觉得网易新闻app的详情页做的特别好.前段时间,看到网上有不少人说网易新闻的详情页是用coreText(富文本)实现的.觉得很可笑,只是一个复制文字的功能,coreText便无法实现,便能排除coreText的可能性了.可是这些错误的言论在网上残留

仿头条新闻app,实现下拉刷新,上拉加载分页

---恢复内容开始--- 环境appcan appcan.ready(function() { page = 1; type = 0; searchDate = getNowTime(); highSearch(type); appcan.frame.setBounce([0,1], function(type) { //$("#pullstatus"+type).html(!type?"开始下拉":"开始上拖"); }, function(ty

Python爬虫:新浪新闻详情页的数据抓取(函数版)

上一篇文章<Python爬虫:抓取新浪新闻数据>详细解说了如何抓取新浪新闻详情页的相关数据,但代码的构建不利于后续扩展,每次抓取新的详情页时都需要重新写一遍,因此,我们需要将其整理成函数,方便直接调用. 详情页抓取的6个数据:新闻标题.评论数.时间.来源.正文.责任编辑. 首先,我们先将评论数整理成函数形式表示: 1 import requests 2 import json 3 import re 4 5 comments_url = 'http://comment5.news.sina.c

react + iscroll5 实现完美 下拉刷新,上拉加载

经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能. 一开始直接采用了react-iscroll插件,它是基于iscroll插件开发的组件.但是开发过程中,发现它内部封装的行为非常固化,限制了我对iscroll的控制能力,因此我转而直接基于iscroll插件实现. 网上也有一些基于浏览器原生滚动条实现的方案,找不到特别好的博客说明,而iscroll是基于Js模拟的滚动条(滚动条也是一个div哦),其兼容性更好,所以还是选择iscroll吧. 先体验效果 在

vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版

在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://www.cnblogs.com/sichaoyun/p/6647458.html <template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(st