transform:scale()妙用——当下拉列表,图片无缝拉升 动画效果
遇到问题
昨天在做音乐播放器的时候,遇到了一个这样的界面:
当下拉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()妙用——当下拉列表,图片无缝拉升 动画效果的更多相关文章
- HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% // ...
- gallery利用代码定位图片并且不丢失动画效果
安卓中,利用gallery.setSelection(position);可以手动定位图片 但是众所周知会丢失动画效果 即使是用gallery.setSelection(position,true); ...
- 图片碎片化mask动画
图片碎片化mask动画 效果 源码 https://github.com/YouXianMing/Animations // // TransformFadeViewController.m // A ...
- zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- 2D转换下的zoom和transform:scale的区别
一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...
- 小tips: zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...
- jQ实现图片无缝轮播
在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ( ̄▽ ̄)ノ. dom ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
随机推荐
- SEO百问
SEO 的工作过程中,大家都会碰到很多这样或那样的问题,做 SEO 随着时间慢慢变长之后,知识会慢慢地积累,之前的问题也会慢慢的都被解答.这里是码动世界为大家整理的有关 SEO 百问百答. 1. 百度 ...
- k8s对接ceph存储
前提条件:已经部署好ceph集群 本次实验由于环境有限,ceph集群是部署在k8s的master节点上的 一.创建ceph存储池 在ceph集群的mon节点上执行以下命令: ceph osd pool ...
- MySQL数据库(四)多表查询
两张假设有两张表格A和B,把表格当作一个集合,那么表格中的记录就是集合中的一个元素. 两张表格如下: TableA:TableB: 2.1 内连接(只有一种场景) inner join 或者join( ...
- Exp7 网络欺诈防范
Exp7 网络欺诈防范 20154305 齐帅 一.实践内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 (1)简单应用SET工具建立冒名网站 (2)ett ...
- Runnable与Callable区别
相同点: 两者都是接口:(废话) 两者都可用来编写多线程程序: 两者都需要调用Thread.start()启动线程: 不同点: 两者最大的不同点是:实现Callable接口的任务线程能返回执行结果:而 ...
- Node selenium-webdriver
Selenium-webdriver基本使用 准备 ① node.js 的安装和配置略 ② Selenium-webdriver npm install -save selenium-webdrive ...
- 2019/3/2周末 java集合学习(一)
Java集合学习(一) ArraysList ArraysList集合就像C++中的vector容器,它可以不考虑其容器的长度,就像一个大染缸一 样,无穷无尽的丢进去也没问题.Java的数据结构和C有 ...
- day_9内存管理
复习 '''文件处理1.操作文件的三步骤 -- 打开文件:硬盘的空间被操作系统持有 | 文件对象被应用程序持续 -- 操作文件:读写操作 -- 释放文件:释放操作系统对硬盘空间的持有 2.基础的读写 ...
- Python编程练习:使用 turtle 库完成正方形的绘制
绘制效果: 源代码: # 正方形 import turtle turtle.setup(650, 350, 200, 200) turtle.penup() turtle.pendown() turt ...
- 脑残式网络编程入门(五):每天都在用的Ping命令,它到底是什么?
本文引用了公众号纯洁的微笑作者奎哥的技术文章,感谢原作者的分享. 1.前言 老于网络编程熟手来说,在测试和部署网络通信应用(比如IM聊天.实时音视频等)时,如果发现网络连接超时,第一时间想到的就是 ...