维多利亚的秘密微信推广广告模仿-图片上下滑动

标签：animation   lightapp   html5   

这个轻应用特别火，所以模仿了一下，详情可以了解http://it.21cn.com/itroll/a/2014/0703/06/27723403_1.shtml

里面分为两部分：一部分是图片上下滑动；一部分是类似刮刮卡的效果；我将分两节讲解，现在先讲解第一部分。

原理：

其实里面就是很多张照片，只有一张显示，当手触摸时将上一张和下一张照片移动到上下两侧，当手指滚动时上下两张照片跟着滚动，当前的照片进行缩小；但手指松开时，判断滚动的距离是否超过阀值，如果超过就将上一张或者下一张滚动到屏幕中间。

分解：

1.触摸时：分别将上一页和下一页显示并置于屏幕的上面和下面；

2.滑动时：上一页和下一页跟着滚动，当前页面进行缩小操作；

3.手指离开时：根据滚动的距离判断，如果大于阀值就将上一页或者下一页滚动到屏幕中间，如果小于就将上一页和下一页回归原地，当前页还原；

        var iniCss = {
            height: document.documentElement.clientHeight,
            width: document.documentElement.clientWidth
        }
        // 初始化高度和宽度
        $('.scroll_box').css(iniCss);
        $('.content_box').css(iniCss);
        // 触摸时
        $('body').on('touchstart', function(event){
                    event.preventDefault(); // 取消默认事件，作用是禁止页面滚动
                    var target = $(event.target).parent(),
                            prev = target.prev('.scroll_box'),
                            next = target.next('.scroll_box'),
                            height = prev.height()||next.height();
                    target.removeClass('animation');
                    if(prev.length !== 0){
                        // 一开始移动时，我们不需要动画
                        prev.removeClass('animation').show().css('-webkit-transform','translate3d(0,'+(-height)+'px,0)');
                    }
                    if(next.length !== 0){
                        next.removeClass('animation').show().css('-webkit-transform','translate3d(0,'+(height)+'px,0)');
                    }
                    window.oldY = event.originalEvent.targetTouches[0].screenY; // 获取点击是的y轴坐标
                })

                // 滑动时
                .on('touchmove', function(event){
                    event.preventDefault();
                    var target = $(event.target).parent(),
                            prev = target.prev('.scroll_box'),
                            next = target.next('.scroll_box'),
                            height = prev.height() || next.height();
                    var newY = event.originalEvent.targetTouches[0].screenY;
                    var distance = window.distance = window.oldY - newY;
                    var scale = 1-Math.abs(distance*0.8)/height;
                    if(prev.length == 0 && distance<0)return;
                    if(next.length == 0 && distance>0)return;
                    target.css('-webkit-transform', 'translateY('+-distance*0.2+'px) scale('+scale+')').css('z-index', -999);
                    next.css('-webkit-transform','translate3d(0,'+(height-distance)+'px,0)');
                    prev.css('-webkit-transform','translate3d(0,'+(-height-distance)+'px,0)');
                })

                // 手指离开时
                .on('touchend', function(event){
                    event.preventDefault();
                    var target = $(event.target).parent(),
                            prev = target.prev('.scroll_box'),
                            next = target.next('.scroll_box'),
                            height = prev.height() || next.height();
                    var distance = window.distance;
                    if(distance > 0){
                        if(next.length == 0)return;
                        if(Math.abs(distance) > 80){
                            prev.hide();
                            target.addClass('animation').css('-webkit-transform', 'translateY('+-distance+'px) scale(0.5)');
                            setTimeout(function () {
                                target.hide();
                            }, 300);
                            next.addClass('animation').css('-webkit-transform','translate3d(0,0,0)');
                        } else {
                            target.addClass('animation').css('-webkit-transform', 'none');
                            next.addClass('animation').css('-webkit-transform','translate3d(0,'+(height)+'px,0)');
                        }
                    } else if(distance < 0){
                        if(prev.length == 0)return;
                        if(Math.abs(distance) > 80){
                            next.hide();
                            target.addClass('animation').css('-webkit-transform', 'translateY('+(height+distance)+'px) scale(0.5)');
                            setTimeout(function () {
                                target.hide();
                            }, 300);
                            prev.addClass('animation').css('-webkit-transform','translate3d(0,0,0)');
                        } else {
                            target.addClass('animation').css('-webkit-transform', 'none');
                            prev.addClass('animation').css('-webkit-transform','translate3d(0,'+(-height)+'px,0)');
                        }
                    }
                    target.css('z-index', 0);
                });

代码我已经提交到CSDN CODE，地址是：https://code.csdn.net/jasondu264/scroll

效果地址：http://duguangwei.sinaapp.com/app.html

维多利亚的秘密微信推广广告模仿-图片上下滑动

标签：animation   lightapp   html5   

原文地址：http://blog.csdn.net/jasondu264/article/details/38034433