移动端滑屏全应用【一】cssHandler操作基础动画函数封装
前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速。我们都会使用getComputedStyle来获取结点的最终样式,但使用getComputedStyle来获取transform时我们获取到的是一个矩阵值,而且是无法通过设置矩阵值反向设置transform的效果的。如下:
body.style.WebkitTransform = 'translateY(50px)'
getComputedStyle(body)['transform'] // "matrix(1, 0, 0, 1, 0, 50)"
综上,在设置transform的时候和常规样式设置的方式就有区别了,而cssHandler就是一个用来获取和设置css样式的函数,这其中就兼容了transform的获取和设置。
首先是transformHandler函数的封装,这其中的原理就是: 实时在需要获取或设置transform样式的元素上绑定自定义的transform具体值,需要获取时便从中获取,需要设置的时候便在其中的基础上进行设置。
transformHandler函数如下:
function transform (el, attr, val) {
if (!el.transform) {
el.transform = {
};
}
if (val === undefined) {
return el.transform[attr];
}
el.transform[attr] = val;
var str = "";
// 此处要注意必须要在原由的基础上遍历
for (var s in el.transform) {
switch (s) {
case "rotate":
case "rotateX":
case "rotateY":
case "rotateZ":
case "skewX":
case "skewY":
str += s + "(" + el.transform[s] + "deg) ";
break;
case "scale":
case "scaleX":
case "scaleY":
str += s + "(" + el.transform[s] + ") ";
break;
case "translateX":
case "translateY":
case "translateZ":
str += s + "(" + el.transform[s] + "px) ";
break;
}
}
el.style.WebkitTransform = el.style.transform = str;
}
然后在将transformHandler与常规的样式处理方式进行合并,得到cssHandler如下:
function css (el, attr, val) {
var transformAttr = ["rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "scale", "scaleX", "scaleY", "translateX", "translateY", "translateZ"];
for (var i = 0; i < transformAttr.length; i++) {
if (attr === transformAttr[i]) {
return transform(el, attr, val);
}
}
if (val === undefined) {
val = getComputedStyle(el)[attr];
console.log(val);
val = parseFloat(val);
return val;
}
if (attr === "opacity") {
el.style[attr] = val;
} else {
el.style[attr] = val + "px";
}
}
移动端滑动全应用【二】会分享移动端的幻灯轮播图的实际操作。
请持续关注。。。
移动端滑屏全应用【一】cssHandler操作基础动画函数封装的更多相关文章
- 移动端滑屏全应用【四】移动端动画贞动画函数mTween封装
首先此函数是基于大家都知道的Tween动画算法的,在此基础上使用了三中讲到的兼容版动画贞,可以使动画变得更流畅. 1. 首先要记得引入Tween.js 2. 引入mTween.js 3. 调用 * m ...
- 移动端滑屏全应用【三】requestAnimationFrame的兼容与使用
首先,传统做动画的方式有以下几种: 1. css的transition过度动画 2. css的animation动画 3. 使用setTimeout或setInterval模拟动画贞(js执行机制决定 ...
- H5案例分享:移动端滑屏 touch事件
移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
- 修改ViewPager调用setCurrentItem时,滑屏的速度 ,解决滑动之间切换动画难看
在使用ViewPager的过程中,有需要直接跳转到某一个页面的情况,这个时候就需要用到ViewPager的setCurrentItem方法了,它的意思是跳转到ViewPager的指定页面,但在使用这个 ...
- 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- JS移动端滑屏事件
来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...
- javascript移动端滑屏事件
来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...
- 利用轮播原理结合hammer.js实现简洁的滑屏功能
最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...
- 滑屏 H5 开发实践九问
滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传.广告.招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大.如今滑屏H5可谓玲琅满目,数不尽数. 作为一个 ...
随机推荐
- Django CSRF提交遇见的问题
简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功能有 ...
- android fragment解析
1.fragment加载到Activity (1).添加fragment到Activity的布局文件 (2).动态在activity中添加fragment 例子: // 步骤1:获取FragmentM ...
- Ubuntu 14.04 apt-get更换阿里云源
https://blog.csdn.net/satomic/article/details/78997611
- 转载CSDN博客步骤
在参考“如何快速转载CSDN中的博客”后,由于自己不懂html以及markdown相关知识,所以花了一些时间来弄明白怎么转载博客,以下为转载CSDN博客步骤和一些知识小笔记. 参考博客原址:http: ...
- python 历险记(四)— python 中常用的 json 操作
目录 引言 基础知识 什么是 JSON? JSON 的语法 JSON 对象有哪些特点? JSON 数组有哪些特点? 什么是编码和解码? 常用的 json 操作有哪些? json 操作需要什么库? 如何 ...
- 【转】Shell编程进阶篇(完结)
[转]Shell编程进阶篇(完结) 1.1 for循环语句 在计算机科学中,for循环(英语:for loop)是一种编程语言的迭代陈述,能够让程式码反复的执行. 它跟其他的循环,如while循环,最 ...
- 所有Windows7下游戏的全屏问题
Win键+R键,打开运行窗口,输入regedit 回车,这样就打开了注册表编辑器,然后,定位到以下位置:HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\ ...
- Ubuntu 分辨率显示出错,分辨率不是最佳分辨率的解决办法
本文为转载,但在Ubuntu16.04LTS下亲测有效. (1)首先使用 xrandr 命令列出当前所能检测到的分辨率,如一台显示器,最佳分辨率为 1440x900(我的显示器尽量设置1680x105 ...
- nodejs 访问网站并操作xpath
var xpath = require('xpath'); //引用xpath包 var dom = require('xmldom-silent').DOMParser;//引用xmldom包 va ...
- Window下通过charles代理抓取iphone/android手机Https请求乱码问题处理
Window下通过charles代理抓取iphone手机Https请求乱码问题 如果保持默认设置,https的reqeust和response都是乱码,设置完之后https就可以抓包了 手机端操作: ...