/** * 类型3文章(Note: article-type-three在一个页面中只能出现一次(业务注意点),代码实现按照只有一个类型3实现) * @author: xuqi(qi.xu@yoho.cn) * @date;2015/3/30 */ var $ = require('jquery'); require('lazyload'); /** * 初始化$事件并默认选中列表第一项 */ exports.init = function() { $(function() { var container = $('.article-type-three'), thumbContainer = container.find('.thumb-container'), prodList = container.find('.prod-list'), wH = $(window).height(), isInit = true, tContainerH, containerH, containerTop; /** * 计算小箭头位置函数 * @param index(类型为number,调用函数li的index) */ arrowPosition = function (element,index) { //640为设计图尺寸,也就是font-size为40下的1rem,所以数值都参照640定 var container = element, item = container.find('li'), len = item.size(), //获取一共多少li midNum = Math.ceil(len / 2), //获取中间li的index+1 documentFont = parseInt($("html").css("fontSize")), //获取html的font-size itemMarginRight = parseInt(item.css('marginRight'))/ documentFont * 40, //获取li的margin-right在640下数值 itemWidth = item.width() / documentFont * 40, //获取li的widtht在640下数值 surPlusValue = (parseInt(container.css('padding-left'))/ documentFont * 40 - itemMarginRight)/2, //获取container的padding-left与itemMarginRight相减后除以2在640下数值 backgroundLeft; //container背景图片左偏移的位置 /** * 320为640分辨率下中间值 * index-midNum为偏移中间li的数值 * (index - midNum) * (itemWidth + itemMarginRight)当前li偏移中间li的距离 * - surPlusValue 减去container的padding与li的margin-right差值的一半 * 除以40,由640下的px变为rem */ backgroundLeft = -(320 - (index - midNum) * (itemWidth + itemMarginRight) - surPlusValue)/40 + 'rem'; container.css({"backgroundPosition":backgroundLeft + " bottom"}); }; //点击分类,显示分类下推荐商品列表 thumbContainer.delegate('.thumb', 'click', function() { var curItem, index; curItem = $(this); index = curItem.index(); thumbContainer.find('.thumb').removeClass('focus') curItem.addClass('focus'); arrowPosition(thumbContainer,index + 1); prodList.find('.prod') .addClass('hide') .eq(index) .removeClass('hide'); //图片懒加载 $("img.lazy").lazyload({ placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw==" }); //scroll to top if (!isInit) { $('body').animate({ scrollTop: container.offset().top - (thumbContainer.hasClass('static') ? 0 : thumbContainer.outerHeight()) }, 400); } else { isInit = false; } }); //默认选中第一个 thumbContainer.find('.thumb:first-child').click(); tContainerH = thumbContainer.outerHeight(); //thumber-container高度 containerH = container.height(); //article-type-three高度 containerTop = container.offset().top; //article-type-three offset top //scroll时控制列表的位置 $(document).scroll(function() { var sTop = $(this).scrollTop(); //Tip: removeClass只用移除相邻状态即可 if (sTop <= containerTop - wH + tContainerH) { thumbContainer .addClass('fixed-bottom') .removeClass('static'); prodList.css({ 'margin-top': tContainerH }); } else if (sTop <= containerTop) { thumbContainer .addClass('static') .removeClass('fixed-bottom fixed-top') .css('top' , ''); prodList.removeAttr('style') } else if (sTop <= containerTop + containerH - tContainerH) { thumbContainer .addClass('fixed-top') .removeClass('static absolute') .css('top' , ''); prodList.css({ 'margin-top': tContainerH }); } else if (sTop <= containerTop + containerH) { thumbContainer .addClass('absolute') .removeClass('static fixed-top') .css({ top: containerTop + containerH - tContainerH }); prodList.css({ 'margin-top': tContainerH }); } else if (sTop > containerTop + containerH) { thumbContainer .addClass('static') .removeClass('absolute') .css('top' , ''); prodList.removeAttr('style'); } }); //初始执行scroll从而初始化分类信息的位置(非0时默认会执行scroll) if ($(document).scrollTop() === 0) { $(document).scroll(); } }); };