实现类似饿了么列表滚动侦听以及加入购物车动画和图片懒加载功能
修改商城页面，
1.实现滑动右边商品列表时，左边的商品分类能根据当前显示的商品类型自动改变样式。
2.点击左边的商品分类，右边的商品列表可以滑动到对应商品的位置。
3.实现图片懒加载功能，
4.实现添加购物车动画。
用到的方法以及问题：
思路：
1.利用touchmove和touchend事件，滑动过程中调用slide（）方法，slide方法监听每个商品分类对应的列表div距顶部的距离，当某一分类到达顶部的时候，改变左边样式。
主要方法：
//屏幕滑动改变商品分类列表样式
var $sections = $('.goods');//右侧商品分类对应的div
var $navs = $('.shangpinglan li'); //左侧商品类别
var len = $sections.length - 1;//分类个数
for (; len > -1; len--) {
var that = $sections.eq(len);//某一分类商品对应的div
var good_height = $(".balishuigundong>div>:last").get(0).getBoundingClientRect().height;//
单个商品框的高度
var lg = $(that).find(".balishui2").length;//当前分类商品个数总量
if ((that.offset().top) (heightY - good_height*lg)) {
//处理，改变样式
break;
}
}
主要是要计算距离，获取元素高度：
height() = height(100) = 100
innerHeight() = height(100) + padding(10*2)
outerHeight() = height(100) + padding(10*2) + border(1*2)
outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132
$("")
.get(0).getBoundingClientRect().height:获取精确的带小数点的高度；
2. 利用click事件，改变当前点击元素的样式，获取当前点击分类对应的商品列表div，获取当前商品列表div上边的总高度，利用
animate({'scrollTop'，300}）方法使外层div上移；
主要代码：
$(".shangpinglan li").css("backgroundColor", "").css("borderRight", "1px");
$(this).css("backgroundColor", "#fff").css("borderRight", "0px");
$(this).addClass('tk');
var target = $(this).attr("href");//href = 当前分类列表div的 id
var divs = $(target).prevAll();
var forder_top = 0;
var goods_num = 0;
if(divs.length>0){
for(var i = 0;i
goods_num = goods_num + (divs[i].children.length)-1;
}
}
var cate_height = $(target+">:first").get(0).getBoundingClientRect().height;//商品类别说明的高度
var good_height = $(target+">:last").get(0).getBoundingClientRect().height;
var category = $("#cata").get(0).getBoundingClientRect().height;//商品类别说明浮动框的高度
forder_top = goods_num *good_height + divs.length*cate_height;
$(".balishuigundong").animate({'scrollTop':forder_top+cate_height-category},300,function(){img_load();});//
滑动结束后回调图片懒加载方法
$("#cata").html($(this)[0].innerHTML);
1.2问题：手机端滑动结束之后会有一段惯性滑动，所以滑动结束之后，给div添加了on('scroll‘）方法，添加定时器判断惯性滑动是否结束，结束了之后去掉scroll方法，避免在点击商品分类的时候再调用滑动的方法，因为滑动方法是从上到下每个类别都要加载一次，而点击方法不需要每个都加载，只要直接跳到相应的商品类别就可以。
主要代码：
el.addEventListener('touchend', function(evt) {
topValue = 0,// 上次滚动条到顶部的距离
interval = null;// 定时器
if($(evt.currentTarget).attr("class") == "balishuigundong"){
$('.balishuigundong').on('scroll',function(){
slide();
img_load();
//判断滑动
if(interval == null)// 未发起时，启动定时器，1秒1执行
interval = setInterval(function(){
if($('.balishuigundong').offset().top == topValue) {
//alert("滑动结束!");
$('.balishuigundong').off('scroll');
clearInterval(interval);
interval = null;
} }, 1000);
topValue = $('.balishuigundong').offset().top;
});
}
});
3.图片懒加载：
原理：先把src定义为空或者很小的图片，图片的真是地址存储在data-url中，当图片出现在视野范围之后，在把地址改为真实的地址。
主要代码：
//实现图片懒加载
var img_load = function(){
// 获取包含data-src属性的img，并以jQuery对象存入数组:
var lazyImgs = $.map($('img[src="img/img_load.gif"]').get(), function (i) {
return $(i);
});
if (lazyImgs.length > 0) { // 判断是否还有未加载的img:
var loadedIndex = []; // 存放待删除的索引:
$.each(lazyImgs, function ($i, index) {// 循环处理数组的每个img元素:
// 判断是否在可视范围内:
if(index.offset().top < ($(".balishuigundong").offset().top+ $(".balishuigundong").get(0).getBoundingClientRect().height)){
index.attr('src', index.attr('data-src')); // 设置src属性:
loadedIndex.unshift(index); // 添加到待删除数组:
}else{
return false;
}
});
// 删除已处理的对象:
$.each(loadedIndex, function (index) {
lazyImgs.splice(index, 1);
});
}
}
4.添加购物车动画
飞入购物车效果代码：
/*添加购物车小球样式*/
.point-outer.point-pre {
display: none;
}
.point-outer {
position: absolute;
z-index: 20;
-webkit-transition: all 0.5s cubic-bezier(0.39,-0.4,0.83,0.23) 0s;
transition: all 0.5s cubic-bezier(0.39,-0.4,0.83,0.23) 0s;
}
.point-inner {
width: 20px;
height: 20px;
line-height: 50px;
border-radius: 50%;
background-color: #00cc9a;
-webkit-transition: all 0.5s linear 0s;
color: #ffffff;
text-align: center;
font-size: 0.7rem;
}
js：
//小球运动动画
var startOffset = $(this).offset();
var endTop = window.outerHeight - 30,
endLeft = 20,
left = startOffset.left,
top = startOffset.top;
var outer = $('#pointDivs .point-pre').first().removeClass("point-pre").css({
left: left + 'px',
top: top + 'px'
});
var inner = outer.find(".point-inner");
setTimeout(function() {
outer[0].style.webkitTransform = 'translate3d(0,' + (endTop - top) + 'px,0)';
inner[0].style.webkitTransform = 'translate3d(' + (endLeft - left) + 'px,0,0)';
setTimeout(function() {
outer.removeAttr("style").addClass("point-pre");
inner.removeAttr("style");
}, 500);
//这里的延迟值和小球的运动时间相关
}, 1);
//小球运动坐标