美文网首页
轮播图视差效果

轮播图视差效果

作者: youlianchun | 来源:发表于2017-09-15 17:46 被阅读0次

现在很多轮播图都带有视差效果。

介绍一种图视差效果的实现效果如下:


示例图

细心观察就会发现 cell.contentView.center 位于 cell在屏幕上可见区域的中心点,对于scrollowView也是如此。

代码也很简单(这里是基于table实现的,scrollView同理):

NSArray *arr = scrollview.visibleCells;
for (UITableViewCell* cell in arr) {
    CGRect rect = [cell convertRect:cell.bounds toView:self];
    CGFloat w = CGRectGetWidth(cell.bounds);
    CGFloat cx;
    if (rect.origin.x>0) {
        cx = (w - rect.origin.x)/2.0;
    }else{
        cx = w - (w + rect.origin.x)/2.0;
    }
    cell.contentView.center = CGPointMake(cx, cell.contentView.center.y);
}

视差效果代码在【scrollViewDidScroll:】代理内执行。

相关文章

  • 轮播图视差效果

    现在很多轮播图都带有视差效果。 介绍一种图视差效果的实现效果如下: 细心观察就会发现 cell.contentVi...

  • iOS Gif for Demo

    Swift4.0 卡片/渐隐/视差滚动轮播图 ? 渐隐 FadeViewController 卡片 CardVie...

  • android轮播图效果

    先上效果图: viewpager+handler+runnableTask实现轮播图效果。可以自动轮播,左右无限滑...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • Vue项目中使用elementUI中的Carousel 走马灯实

    轮播图效果 如需封装可参考如下: 封装Carousel走马灯实现轮播图效果[https://www.jianshu...

  • 轮播图

    今天我们就来做一个轮播图效果,首先我说一下轮播图的原理,轮播图就是一组图片利用视觉差达到图片切换的效果。1、我们使...

  • 技术练习的demo集

    demo1 实现优酷轮播图效果 页面效果展示 功能:自动轮播,hover停止轮播,点击left/right上一页/...

  • swift UICollectionView 实现无限轮播图

    无线轮播图的实现方式有很多,这里介绍如何通过 UICollectionView 实现无线轮播图.效果图如下: 具体...

  • 仿造天猫、京东、凡客等,轮播图的开发(jQuery)

    轮播图思路:1、轮播图布局2、定时器实现轮播效果3、指示器的鼠标移入(mouseenter)、移出(mousele...

  • Axure交互设计操作(二)

    之前一里总结到轮播效果,其实实战当中轮播效果一般是复合使用的。比如: 和轮播图类似,这其实也是一个轮播效果。我刚遇...

网友评论

      本文标题:轮播图视差效果

      本文链接:https://www.haomeiwen.com/subject/cqcesxtx.html