修改商城页面,
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+1 && (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)