+brands.page.js

 /**
 /**
- * Created by DELL on 2016.9.30.
+ * 首页
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/11/23
  */
  */
+
+var $ = require('yoho-jquery'),
+    lazyLoad = require('yoho-jquery-lazyload');
+
+
+require('../common');
+
+var Handlebars = require('yoho-handlebars'),
+    dot = require('yoho-dotdotdot');
+
+var $tabs = $('.brands-tabs');
+var $list = $('.brands-list');
+var $gory = $('.brands-category');
+var $news = $('.news-txt ul');
+var $clearfix = $list.find('dl.clearfix');
+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 = '<div class="brands-dialog">';
+
+templete += '    <div class="brands-layer">';
+templete += '        <div class="layer-content">';
+templete += '            <div class="title">{{title}}</div>';
+templete += '            <div class="clearfix desc">';
+templete += '                <img src="{{icon}}">';
+templete += '                <p class="right">{{content}}</p>';
+templete += '            </div> ';
+templete += '            <div class="featured">';
+templete += '                <p>{{subtitle}}</p> ';
+templete += '                <div class="clearfix"> ';
+templete += '                    {{#each imgs}}';
+templete += '                    <img src="{{src}}">';
+templete += '                    {{/each}}';
+templete += '                </div>';
+templete += '            </div>';
+templete += '        </div>';
+templete += '    </div>';
+templete += '</div>';
+
+dot($('.brand-desc'));
+
+
+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, templete) {
+    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 = Handlebars.compile(templete);
+    $parent.append(myTemplate(data));
+    dot($parent.find('.right'));
+
+    if (offset.right - 350 < 0) {
+        $parent.find('.brands-layer')
+            .addClass('brands-layer-right').css('left', -330 - offset.width);
+    }
+}
+
+//鼠标悬浮品牌,请求数据,并且展示
+function bindHoverEvent() {
+    $brand.unbind('mouseenter').unbind('mouseleave').hover(function() {
+        var $this = $(this);
+        var key = $this.attr('data-key');
+
+        var 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();
+    });
+}
+
+if ($clearfix.length < 26) {
+    $.ajax({
+        url: '/brands/brandList',
+        type: 'POST',
+        data: {
+            start: $clearfix.length ? ($clearfix.length + 1) : 1
+        },
+        success: function(_data) {
+            if (_data) {
+                $list.append(_data);
+                $brand = $list.find('li>a');
+                bindHoverEvent();
+            }
+        }
+    });
+}
+
+bindHoverEvent();