前接上文 : 微信H5页面框架设计 h5_slide.js (一)
在前文中,我们简单讲了一个移动端整页切换的效果处理,本文主要来识别滚屏动画的进度接口设置。
考虑到单页面内滚动高度可能随着不同屏幕分辨率有所不同,我们设计的接口只是提供一个滚动百分比的参数,这个参数的值可以从 0 ~ 1.
run(per/*滚动百分比*/,dir/*滚动方向*/) // 滚动方向不一定用得上,暂且留着。
我们将这个run假定注册在原生的dom元素上面,再加一个run的className来识别,那么相关代码就会如下:
$.on(holder, "touchstart", function(e){ var touch = e.touches[0]; startTy = curTy = touch.clientY; }).on(holder, "touchmove", function(e){ var touch = e.changedTouches[0], endTy = touch.clientY; run( curTy - endTy, e); curTy = endTy; }); function run(dir, e){ e.stopPropagation(); e.preventDefault(); var _this = sections[current_index]; var st = _this.scrollTop, ch = _this.clientHeight, sh = _this.scrollHeight; scrollTy = st; st = _this.scrollTop = _this.scrollTop + dir; // 这里还有判断跳切换页面的逻辑 $(".run", _this).forEach(function(r){ // 对当前section中的所有.run循环,判断是否存在run方法 if( typeof r.run === "function" ){ var per = _this.scrollTop == (sh-ch) ? 1 : _this.scrollTop / (sh-ch); r.run(per, dir); // 存在这个方法就执行它, 把per带上。 per计算来自于当前滚动高度÷最大滚动高度 } }); }
完事儿,我们需要达到的效果其实就是酱紫的:
document.getElementById('logo').run = function(per, dir){ var W = document.documentElement.clientWidth; this.style.cssText = "-webkit-transform: translate3d("+( (140+W) * per |0)+"px, "+(this.parentNode.scrollTop|0)+"px, 0); " +"transform: translate3d("+((140+W) * per |0)+"px, "+(this.parentNode.scrollTop|0)+"px, 0);"; };
绑定一个run,就能按照规则执行滚动动画咯。
demo: http://cardistry.cn/hero/demo.html
建议用手机查看,或者使用chrome的移动端调试控制台。
查看源代码的时候你会发现如下代码:
.set = function(set,w,h,W,H){ set.begin({x:0,y:0,rotate: 0, scale:1}).then({ per: .3, x: w-W, y: 300, rotate: 180, scale: .5 }).then({ per: .5, x: -100, y: 200, opacity: 1, rotate: 360, scale: 1 }).then({ per: .7, x: -100, y: 200, opacity: 1, rotate: 240, scale: 1.5 }).then({ per: .8, x: -100, y: 200, opacity:.2, rotate: 120, scale: 1 }).end({x:w-W,y:H-h,rotate:0, scale:1}); };
看起来很高大上的样子, 写动画好像更加方便了。这个其实就是基于上面run的一个线性封装,具体实现,敬请期待 微信H5页面框架设计 h5_slide.js (三)。
未注明转发、原文均为本站原创。分享本文请注明 原文链接 !
[基于html5、js的超强报表控件Echarts系列教程(1)-与其他报表的区别和介绍]
[基于html5、js的超强报表控件Echarts系列教程(2)-使用及环境部署]
[基于html5、js的超强报表控件Echarts系列教程(3)--事件使用]
[Echarts asp.net+ashx项目部署及代码实例(附demo)]
[echarts教程-asp.net+ashx实现堆积柱状图说明及demo下载]
[ECharts教程--基于力导向布局图功能更完善的人物关系图插件扩展开发(1)]
[ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-节点样式和点击事件]
微信扫一扫,徜徉悠嘻网,您的休闲乐园
技术交流群:346717337
投稿:suchso@vip.qq.com
专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询