/** * 首页 * @author: xuqi<qi.xu@yoho.cn> * @date: 2015/11/23 */ var $ = require('yoho-jquery'), lazyLoad = require('yoho-jquery-lazyload'); var $tabs = $('.brands-tabs'); var $list = $('.brands-list'); var $gory = $('.brands-category'); var $news = $('.news-txt ul'); var $brand = $list.find('li>a'); var $category = $gory.find('a'); var $tab = $tabs.find('li>a'); var $arr = $tabs.find('.hoverarr'); var $thisTab; var categoryHeight = $category.height(); var categoryTop = $category.offset() ? $category.offset().top : 0; var newsHeight = $news.height(); var newsTop = $news.offset() ? $news.offset().top : 0; var timeout, _id; // 用于临时存储数据 var tempdata = {}; var templete = require('hbs/brands/brand-info.hbs'); require('../common'); require('yoho-jquery-dotdotdot'); $('.brand-desc').dotdotdot({ wrap: 'letter' }); lazyLoad($('img.lazy')); // $('.slide-container').slider({ // orient: true // }); $.easing.easeOutQuint = function(x, t, b, c, d) { return c * ((t = t / d - 1) * t * t * t * t + 1) + b; }; function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); var r = window.location.search.substr(1).match(reg); if (r !== null) { return window.unescape(r[2]); } return null; } // 格式化资讯NEWS标题数量 if ($news.length) { $news.find('li').each(function() { var $dom = $(this); var domHeight = $dom.offset().top - newsTop + $dom.height(); if (domHeight > newsHeight) { $dom.hide(); } }); } // 头部图片TAB切换展示 $tab.eq(0).parent('li').find('.brands-content').css('z-index', '1'); _id = getQueryString('id') ? getQueryString('id') : 0; // 设置对应TAB选中 $thisTab = $tab.eq(_id); $thisTab.find('.g-mask').addClass('g-mask-on'); if (_id && $thisTab.length) { $arr.css({ left: parseFloat($thisTab.offset().left) - parseFloat($tabs.offset().left) }); } $tab.hover(function() { var $this = $(this); clearTimeout(timeout); timeout = setTimeout(function() { var targetLeft = parseFloat($this.offset().left) - parseFloat($tabs.offset().left); $arr.animate({ left: targetLeft }, 200, 'easeOutQuint'); }, 50); $tabs.find('.brands-content').removeAttr('style'); $this.parent('li').find('.brands-content').css('z-index', '1'); }, function() { clearTimeout(timeout); }); // 品牌类别滚动事件 $(window).scroll(function() { if ($(this).scrollTop() >= categoryTop) { $gory.addClass('category-fix'); } else { $gory.removeClass('category-fix'); } }); // 点击字母,页面滚动到相关区域 $category.click(function() { var name = $(this).attr('href').split('#')[1]; var targetTop = $list.find('[name="' + name + '"]').offset().top - categoryHeight; if (!$gory.hasClass('category-fix')) { targetTop -= categoryHeight; } $('html,body').animate({ scrollTop: targetTop }, 200); return false; }); // 浮层代码 function bindTemplete($select, data, tmp) { var $this = $select; var offset = { width: $this.width(), left: $this.offset().left, right: parseFloat($(window).width()) - parseFloat($this.offset().left) - parseFloat($this.width()) }; var $parent = $this.parent('li'); var myTemplate; $list.find('.brands-dialog').remove(); myTemplate = tmp; $parent.append(myTemplate(data)); $parent.find('.right').dotdotdot({ wrap: 'letter' }); if (offset.right - 350 < 0) { $parent.find('.brands-layer') .addClass('brands-layer-right').css('left', -330 - offset.width); } } // 鼠标悬浮品牌,请求数据,并且展示 function bindHoverEvent() { if (String($list.data('ishover')) === 'true') { return; } $brand.unbind('mouseenter').unbind('mouseleave').hover(function() { var $this = $(this); var key = $this.attr('data-key'); var options; // 全球购品牌不展示品牌简介 if (+key < 0) { return; } options = { url: '/brands/brandinfo', type: 'get', data: { brandId: key }, success: function(_data) { if (_data.code === 200 && _data.brand) { if (!tempdata.hasOwnProperty(_data.brand.key)) { tempdata[_data.brand.key] = _data.brand; } bindTemplete($this, tempdata[_data.brand.key], templete); } } }; clearTimeout(timeout); timeout = setTimeout(function() { if (!tempdata.hasOwnProperty(key)) { $.ajax(options); } else { bindTemplete($this, tempdata[key], templete); } }, 200); }, function() { clearTimeout(timeout); $list.find('.brands-dialog').remove(); }); } bindHoverEvent();