首页 > 代码库 > 维多利亚的秘密微信推广广告模仿-图片上下滑动
维多利亚的秘密微信推广广告模仿-图片上下滑动
这个轻应用特别火,所以模仿了一下,详情可以了解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
维多利亚的秘密微信推广广告模仿-图片上下滑动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。