遇到问题

昨天在做音乐播放器的时候,遇到了一个这样的界面:

当下拉scroll区域列表的时候,图片会按照比例无缝连接放大,就想下面的效果图一样

分析问题

从上图可一看到,页面主要由两个div组成,图片为div1,列表为div2,当向下滑动div2,div1也上下拉升,无缝紧贴div1。既然是div(图片)的拉伸,我们就可以用到CSS3中的  transform:scale  (按比例缩放变形)。至于这个比例到底是如何,我们可以使用数学来计算。

公式计算

上面说了,列表div2是由better-scroll来完成数据列表滑动效果,Y轴滑动的距离我们可以通过better-scroll提供给我们的函数动态得到的(即使不用better-scroll,用原始的方式也可以得到Y轴列表滑动的距离),因此,我们拿到了向下滑动的距离Y,于是我拉升图片的比例也就出来了,就是说,下滑距离Y,那么我图片div的长与宽都要增加Y,所以比例公式为:  scale = 1 +  (Y / imageHeight)

解决问题

最后,拿到比例就简单了,我们直接使用CSS3给我们提供的变形属性中的缩放,就大功告成了。即

 this.$refs.bgImage.style[transform] = `scale(${scale})`

-----完-----

transform:scale()妙用——当下拉列表,图片无缝拉升 动画效果的更多相关文章

  1. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  2. gallery利用代码定位图片并且不丢失动画效果

    安卓中,利用gallery.setSelection(position);可以手动定位图片 但是众所周知会丢失动画效果 即使是用gallery.setSelection(position,true); ...

  3. 图片碎片化mask动画

    图片碎片化mask动画 效果 源码 https://github.com/YouXianMing/Animations // // TransformFadeViewController.m // A ...

  4. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  5. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  6. 2D转换下的zoom和transform:scale的区别

    一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...

  7. 小tips: zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

  8. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ( ̄▽ ̄)ノ. dom ...

  9. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

随机推荐

  1. SEO百问

    SEO 的工作过程中,大家都会碰到很多这样或那样的问题,做 SEO 随着时间慢慢变长之后,知识会慢慢地积累,之前的问题也会慢慢的都被解答.这里是码动世界为大家整理的有关 SEO 百问百答. 1. 百度 ...

  2. k8s对接ceph存储

    前提条件:已经部署好ceph集群 本次实验由于环境有限,ceph集群是部署在k8s的master节点上的 一.创建ceph存储池 在ceph集群的mon节点上执行以下命令: ceph osd pool ...

  3. MySQL数据库(四)多表查询

    两张假设有两张表格A和B,把表格当作一个集合,那么表格中的记录就是集合中的一个元素. 两张表格如下: TableA:TableB: 2.1 内连接(只有一种场景) inner join 或者join( ...

  4. Exp7 网络欺诈防范

    Exp7 网络欺诈防范 20154305 齐帅 一.实践内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 (1)简单应用SET工具建立冒名网站 (2)ett ...

  5. Runnable与Callable区别

    相同点: 两者都是接口:(废话) 两者都可用来编写多线程程序: 两者都需要调用Thread.start()启动线程: 不同点: 两者最大的不同点是:实现Callable接口的任务线程能返回执行结果:而 ...

  6. Node selenium-webdriver

    Selenium-webdriver基本使用 准备 ① node.js 的安装和配置略 ② Selenium-webdriver npm install -save selenium-webdrive ...

  7. 2019/3/2周末 java集合学习(一)

    Java集合学习(一) ArraysList ArraysList集合就像C++中的vector容器,它可以不考虑其容器的长度,就像一个大染缸一 样,无穷无尽的丢进去也没问题.Java的数据结构和C有 ...

  8. day_9内存管理

    复习 '''文件处理​1.操作文件的三步骤 -- 打开文件:硬盘的空间被操作系统持有 | 文件对象被应用程序持续 -- 操作文件:读写操作 -- 释放文件:释放操作系统对硬盘空间的持有 2.基础的读写 ...

  9. Python编程练习:使用 turtle 库完成正方形的绘制

    绘制效果: 源代码: # 正方形 import turtle turtle.setup(650, 350, 200, 200) turtle.penup() turtle.pendown() turt ...

  10. 脑残式网络编程入门(五):每天都在用的Ping命令,它到底是什么?

    本文引用了公众号纯洁的微笑作者奎哥的技术文章,感谢原作者的分享. 1.前言   老于网络编程熟手来说,在测试和部署网络通信应用(比如IM聊天.实时音视频等)时,如果发现网络连接超时,第一时间想到的就是 ...