现在位置首页 / 项目实战 /正文

微信H5页面框架设计 h5_slide.js (二)

作者: 释梵 | 2015年7月13日| 热度:℃ | 评论: |参与:

前接上文 : 微信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 (三)。 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询