Blame view

web-static/js/brand/brands.js 3.84 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
var $ = require('yoho.jquery'),
    Handlebars = require('yoho.handlebars');

var $tabs = $('.brands-tabs');
var $list = $('.brands-list');
var $gory = $('.brands-category');
var $brand = $list.find('li>a');
var $category = $gory.find('a');
var $tab = $tabs.find('li>a');
var $arr = $tabs.find('.hoverarr');

var categoryHeight = $category.height();
var categoryTop = $category.offset() ? $category.offset().top : 0;
var timeout;


//用于临时存储数据
var tempdata = {};

var 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>';


$.easing.easeOutQuint = function(x, t, b, c, d) {
    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
};

//头部图片TAB切换展示
$tab.eq(0).parent('li').find('.brands-content').css('z-index', '1');
$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');
    }, 200);
    $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;

    $('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 myTemplate;

    $list.find('.brands-layer').remove();
    myTemplate = Handlebars.compile(templete);

    $this.parent('li').find('.brands-dialog').html(myTemplate(data));

    if (offset.right - 350 < 0) {
        $this.parent('li').find('.brands-layer')
       .addClass('brands-layer-right').css('left', -330 - offset.width);
    }
}

//鼠标悬浮品牌,请求数据,并且展示
$brand.hover(function() {
    var $this = $(this);
    var key = $this.attr('data-key');

    var options = {
        url: '/brands/brandinfo',
        type: 'get',
        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-layer').remove();
});