主要的思路是利用iscroll.js+css3实现该效果，首先在body放置两个box，每个box的宽高都是100%，给每个box初始化iscroll，检测每个box里面滑动区域的位置，当第一个box里面的滑动区域滑到最底部的时候，继续滑动，box1上划一屏的距离，box2随之上划一屏的距离，反之，box2里面滑动区域下滑的时候类似，
代码部分：
html代码
<div class="detail-box">
<div class="detail-wrap">
<div class="detail-box1 detail-info" id="detail-box1">
<div class="box-scroller">
<!--商品图片 sta-->
<div style="width:100%;height:auto;">
<div class="slide-wrap">
<span class="sq"></span>
<div class="s-wrap">
<ul class="slide">
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_07_02.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
<li><a href="#"><img src="images/lazyPic.gif" data-src="images/test/p_14.jpg"></a></li>
</ul>
</div>
<div class="slider-statusdetail"></div>
</div>
<!--商品图片 end-->
<!--商品标题价格 sta-->
<div class="detail-con wbox">
<div class="title-wrap wbox-flex">
<h1>小牛皮复古双肩包肩包肩小牛皮复古双肩包肩包肩小牛皮复古双肩包肩包肩小牛皮复古双肩包肩包肩</h1>
<h2>小牛皮复古双肩包肩包肩小牛皮复古双肩包肩包肩小牛皮复古双肩包肩包肩小牛皮复古双肩包肩包肩
</h2>
<div class="text-info clearfix">
<div class="price fl">
¥ 398.00
</div>
<div class="label-wrap fl">
<label>闪购</label>
<!--<label>满减商品</label>
<label>满49包邮</label>-->
</div>
</div>
<div class="original-price clearfix">
<div class="other-price fl">
¥ 398
</div>
</div>
<div class="detail-tip">
*温馨提示：此商品为特殊商品，暂不支持使用优惠券
</div>
<div class="good-tip wbox">
<div class="fir-tip">原装正品保证</div>
<div class="wbox-flex">全场满49元包邮</div>
<div class="thr-tip" style="width:4.95rem;height:.48rem;">7天无理由退货服务</div>
</div>
</div>
</div>
<!--商品参数 end-->
<div class="cho-type">
<a class="JinCar chooseSpec" data-pop="true" href="javascript:;">选择规格<span class="type-color">颜色</span><span class="type-size">尺码</span></a>
</div>
<!--综合评分sta-->
<div class="com-eva wbox">
<div class="eva-score">
<div class="eva-txt">综合评分：<span class="score">4.5</span>分</div>
<div class="eva-num">(有<span>1234</span>人参加打分)</div>
</div>
<ul class="eva-star wbox-flex">
<li data-rh-score="0" class="create-sco wbox">
<div>创意</div>
<div class="star">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="tip">5.0分</div>
</li>
<li data-rh-score="0" class="practical-sco wbox">
<div>实用</div>
<div class="star">
<span></span>
<span></span>
<span></span>
<span class="emptyStar"></span>
<span class="emptyStar"></span>
</div>
<div class="tip">3.0分</div>
</li>
<li data-rh-score="0" class="quality-sco wbox">
<div>质量</div>
<div class="star">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="emptyStar"></span>
</div>
<div class="tip">4.0分</div>
</li>
</ul>
</div>
<!--综合评分end-->
<!--商品评论sta-->
<div class="comment-exa">
<h2>买家评论</h2>
<div class="com-info clearfix">
<div class="com-head fl">
<img src="images/slide_bg.jpg" />
</div>
<div class="com-rig fl">
<span class="com-name">我***满</span>
<div class="com-star">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="com-EmptyStar"></span>
</div>
</div>
</div>
<div class="com-txt">
淳朴善良美丽漂亮时尚淳朴善良美丽漂亮时尚淳朴善良美丽漂亮时尚淳朴善良美丽漂亮时尚淳朴善良美丽漂亮时尚淳朴善良美丽漂亮时尚
淳朴善良美丽漂亮时尚淳朴善良美丽漂亮时尚淳朴善良美丽漂亮时尚淳朴善良美丽漂亮时尚淳朴善良美丽漂亮时尚淳朴善良美丽漂亮时尚
</div>
<div class="com-goodType">
<span class="time">2016.10.21 </span><span>颜色：白 尺码：M</span>
</div>
<a href="comment-list.html" class="com-moreBtn">
查看更多
</a>
</div>
<div class="con-scroll wbox">
<span class="ConScroll-bor wbox-flex"></span><span class="wbox">继续拖动查看商品详情</span><span class="ConScroll-bor wbox-flex"></span>
</div>
</div>
</div>
</div>
<div class="detail-box2 detail-info" id="detail-box2">
<div class="box-scroller box-scroller2">
<!--商品详情图文详情sta-->
<div class="par-box com-detail">
<div class="detail-content">
<p>
<img src="images/test/p_07_02.jpg" data-original="images/test/p_07_02.jpg" />
</p>
<p>
<img src="images/test/p_15.jpg" data-original="images/test/p_15.jpg" />
</p>
<p>
<img src="images/test/p_17.jpg" data-original="images/test/p_17.jpg" />
</p>
</div>
</div>
<!--商品详情图文详情end-->
<!--商品详情参数sta-->
<div class="par-box hide">
<div class="par-info">
<div class="wbox">
<div class="par-name">上市时间</div><div class="wbox-flex">2016年夏季</div>
</div>
<div class="wbox">
<div class="par-name w3">原材料</div><div class="wbox-flex">牛仔裤</div>
</div>
<div class="wbox">
<div class="par-name">上市时间</div><div class="wbox-flex">2016年夏季</div>
</div>
<div class="wbox">
<div class="par-name w2">名称</div><div class="wbox-flex">安妮称套装时尚潮牌年轻安妮称套装时尚潮牌</div>
</div>
<div class="wbox">
<div class="par-name w3">原材料</div><div class="wbox-flex">牛仔裤</div>
</div>
<div class="wbox">
<div class="par-name w2">大小</div><div class="wbox-flex">XXXXXL</div>
</div>
<div class="wbox">
<div class="par-name w2">种类</div><div class="wbox-flex">立体袋</div>
</div>
<div class="wbox">
<div class="par-name w2">图案</div><div class="wbox-flex">纯色</div>
</div>
<div class="wbox">
<div class="par-name">上市时间</div><div class="wbox-flex">2016年夏季</div>
</div>
<div class="wbox">
<div class="par-name w2">名称</div><div class="wbox-flex">安妮称套装时尚潮牌年轻安妮称套装时尚潮牌</div>
</div>
<div class="wbox">
<div class="par-name w3">原材料</div><div class="wbox-flex">牛仔裤</div>
</div>
<div class="wbox">
<div class="par-name">上市时间</div><div class="wbox-flex">2016年夏季</div>
</div>
<div class="wbox">
<div class="par-name w2">名称</div><div class="wbox-flex">安妮称套装时尚潮牌年轻安妮称套装时尚潮牌</div>
</div>
<div class="wbox">
<div class="par-name w3">原材料</div><div class="wbox-flex">牛仔裤</div>
</div>
<div class="wbox">
<div class="par-name w2">大小</div><div class="wbox-flex">XXXXXL</div>
</div>
<div class="wbox">
<div class="par-name w2">种类</div><div class="wbox-flex">立体袋</div>
</div>
<div class="wbox">
<div class="par-name w2">图案</div><div class="wbox-flex">纯色</div>
</div>
<div class="wbox">
<div class="par-name">上市时间</div><div class="wbox-flex">2016年夏季</div>
</div>
<div class="wbox">
<div class="par-name w2">名称</div><div class="wbox-flex">安妮称套装时尚潮牌年轻安妮称套装时尚潮牌</div>
</div>
<div class="wbox">
<div class="par-name w3">原材料</div><div class="wbox-flex">牛仔裤</div>
</div>
<div class="wbox">
<div class="par-name">上市时间</div><div class="wbox-flex">2016年夏季</div>
</div>
<div class="wbox">
<div class="par-name w2">名称</div><div class="wbox-flex">安妮称套装时尚潮牌年轻安妮称套装时尚潮牌</div>
</div>
<div class="wbox">
<div class="par-name w3">原材料</div><div class="wbox-flex">牛仔裤</div>
</div>
<div class="wbox">
<div class="par-name w2">大小</div><div class="wbox-flex">XXXXXL</div>
</div>
<div class="wbox">
<div class="par-name w2">种类</div><div class="wbox-flex">立体袋</div>
</div>
<div class="wbox">
<div class="par-name w2">图案</div><div class="wbox-flex">纯色</div>
</div>
</div>
</div>
<!--商品详情参数end-->
</div>
</div>
</div>
</div>js部分
var minY,minY2;
var box1Hei = $('.detail-box1').height();
var box1scrollerHei = $('.box2-scroller').height();
var screenHei = $(window).height();
//css3动画
function movePage(objName,sum){
var obj=document.getElementById(objName);
obj.style.transition="-webkit-transform 500ms ease-out";
obj.style.webkitTransform="translate(0px,"+sum+"px) scale(1) translateZ(0px)";
}
var myScroll = new iScroll($('.detail-box1')[0],{eventPassthrough: true,hScrollbar:false,vScrollbar:false, scrollX: false, scrollY: true,bounce : true,
'onScrollStart': function() {
minY = this.y;
},
'onScrollMove': function(e){
minY = minY<this.y ? minY : this.y;
//划出屏幕自动弹回
// if((this.y < this.maxScrollY) && (this.pointY < 1)){
// this.scrollTo(0, this.maxScrollY, 400);
// shang("detail-box1",-box1Hei);
// shang("detail-box2",-box1Hei);
// return;
// } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
// this.scrollTo(0, 0, 400);
// return;
// }
if(this.y - this.maxScrollY<-200){
movePage("detail-box1",-box1Hei);
movePage("detail-box2",-box1Hei);
myScroll2.refresh();
$('.nav-fixed-top').removeClass('hide');
$('header').addClass('act').find('.title').removeClass('hide');
}
},
'onScrollEnd': function(){
minY = minY<this.y ? minY : this.y;
if (this.y-minY>50 && this.dirY === 1) {
//滑动end执行的事件
movePage("detail-box1",-box1Hei);
movePage("detail-box2",-box1Hei);
myScroll2.refresh();
$('.nav-fixed-top').removeClass('hide');
$('header').addClass('act').find('.title').removeClass('hide');
}
}
});
//每次iscroll滑动完之后都要refresh一下
setTimeout(function(){
myScroll.refresh()
}, 0);
var myScroll2 = new iScroll($('.detail-box2')[0],{eventPassthrough: true,hScrollbar:false,vScrollbar:false, scrollX: false, scrollY: true,bounce : true,
'onScrollStart': function() {
minY2 = this.y;
},
'onScrollMove': function(e){
minY2 = minY2<this.y ? minY2 : this.y;
//ios滑动出屏幕后 恢复原来的位置
/*if((this.y < this.maxScrollY) && (this.pointY < 1)){
this.scrollTo(0, this.maxScrollY, 400);
return;
} else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
this.scrollTo(0, 0, 400);
shang("detail-box1",0);
shang("detail-box2",0);
return;
}*/
if(this.y>150){
movePage("detail-box1",0);
movePage("detail-box2",0);
myScroll.refresh();
$('header').removeClass('act').find('.title').addClass('hide');
$('.nav-fixed-top').addClass('hide');
}
},
'onScrollEnd': function(){
minY2 = minY2<this.y ? minY2 : this.y;
if (this.y-minY2<20 && this.dirY === -1) {
//滑动end执行的事件
movePage("detail-box1",0);
movePage("detail-box2",0);
myScroll.refresh();
$('header').removeClass('act').find('.title').addClass('hide');
$('.nav-fixed-top').addClass('hide');
}
}
});
setTimeout(function(){
myScroll2.refresh();
}, 0);detail-box1 和detail-box2分别是两个box，（this.y-minY>50 && this.dirY === 1）这段是判断box1里面的滑动部分是否滑到底部，滑到底部执行box2的移动函数
扫一扫
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
