前端知识京东详情页

jquery代码

$(function(){
    showhide();
    hoverSubMenu();
    search();
    share();
    address();
    clickTabs();
    hoverMiniCart();
    clickProductTabs();
    moveMiniImg();
    hoverMiniImg();
    bigImg();
    function bigImg(){
        var $mediumImg = $('#mediumImg');
        var $mask = $('#mask');
        var $maskTop = $('#maskTop');
        var $largeImgContainer = $('#largeImgContainer');
        var $loading = $('#loading');
        var $largeImg = $('#largeImg');
        var maskWidth = $mask.width();
        var maskHeight = $mask.height();
        var maskTopWidth = $maskTop.width();
        var maskTopHeight = $maskTop.height();
        $maskTop.hover(function() {
            $mask.show();
            var src = $mediumImg.attr('src').replace('-m', '-l');
            $largeImg.attr('src', src);
            $largeImgContainer.show();
            $largeImg.on('load', function(){
                var largeWidth = $largeImg.width();
                var largeHeight = $largeImg.height();
                $largeImgContainer.css({
                    width:largeWidth/2,
                    height:largeHeight/2
                })
                $largeImg.show();
                $loading.hide();
                console.log($largeImg.width(), $largeImg.height());
                $maskTop.mousemove(function(event) {
                    var left = 0;
                    var top = 0;
                    var eventLeft = event.offsetX;
                    var eventTop = event.offsetY;
                    left = eventLeft - maskWidth/2;
                    top = eventTop - maskHeight/2;
                    if(left < 0){
                        left = 0;
                    }else if(left > maskTopWidth-maskWidth){
                        left = maskTopWidth-maskWidth;
                    }
                    if(top < 0){
                        top = 0;
                    }else if(top > maskTopHeight-maskHeight){
                        top = maskTopHeight-maskHeight;
                    }
                    $mask.css({left:left,top:top});
                    left = -left * largeWidth / maskTopWidth;
                    top = -top * largeHeight / maskTopHeight;
                    $largeImg.css({left:left, top:top});
                });
            })
        }, function() {
            $mask.hide();
            $largeImgContainer.hide();
            $largeImg.hide();
        });
    }
    function hoverMiniImg(){
        $('#icon_list>li').hover(function() {
            var $img = $(this).children();
            $img.addClass('hoveredThumb');
            var src = $img.attr('src').replace('.jpg', '-m.jpg');
            $('#mediumImg').attr('src', src);
        }, function() {
            $(this).children().removeClass('hoveredThumb');
        });
    }
    function moveMiniImg(){
        var $as = $('#preview>h1>a');
        var $backward = $as.first();
        var $forward = $as.last();
        var $ul = $('#icon_list');
        var SHOW_COUNT = 5;
        var imgCount = $ul.children('li').length;
        var moveCount = 0;
        var liWidth = $ul.children(':first').width();
        if(imgCount>SHOW_COUNT){
            $forward.attr('class', 'forward');
        }
        $forward.click(function() {
            if(moveCount===imgCount-SHOW_COUNT){
                return;
            }
            moveCount++;
            $backward.attr('class', 'backward');
            if(moveCount===imgCount-SHOW_COUNT){
                $forward.attr('class', 'forward_disabled');
            }
            $ul.css({left:-moveCount * liWidth})
        });
        $backward.click(function() {
            if(moveCount===0){
                return;
            }
            moveCount--;
            $forward.attr('class', 'forward');
            if(moveCount===0){
                $backward.attr('class', 'backward_disabled');
            }
            $ul.css({left:-moveCount * liWidth})
        });
    }
    function clickProductTabs(){
        var $lis = $('#product_detail>ul>li');
        var $contents = $('#product_detail>div:gt(0)');
        $lis.click(function() {
            $lis.removeClass('current');
            this.className = 'current';
            var index = $(this).index();
            $contents.hide();
            $contents.eq(index).show();
        });
    }
    function hoverMiniCart(){
        $('#minicart').hover(function() {
            this.className = 'minicart';
            $(this).children(':last').show();
        }, function() {
            this.className = '';
            $(this).children(':last').hide();
        });
    }
    function clickTabs(){
        $('#store_tabs>li').click(function() {
            $('#store_tabs>li').removeClass('hover');
            $(this).addClass('hover');
        });
    }
    function address(){
        $select = $('#store_select');
        $select.hover(function() {
                $(this).children(':gt(0)').show();
            }, function() {
                $(this).children(':gt(0)').hide();
            })
            .children(':last')
            .click(function() {
                $select.children(':gt(0)').hide();
            });
    }
    function share(){
        var isOpen = false;
        var $shareMore = $('#shareMore');
        var $parent = $shareMore.parent();
        var $as = $shareMore.prevAll('a:lt(2)');
        var $b = $shareMore.children();
        $shareMore.click(function() {
            if(isOpen){
                $parent.css('width', 155);
                $as.hide();
                $b.removeClass('backword');
            }else{
                $parent.css('width', 200);
                $as.show();
                $b.addClass('backword');
            }
            isOpen = !isOpen;
        });
    }
    function search(){
        $('#txtSearch')
            .on('focus keyup', function() {
                var txt = this.value.trim();
                if(txt){
                    $('#search_helper').show();
                }
            })
            .blur(function() {
                $('#search_helper').hide();
            });
    }
    function hoverSubMenu(){
        $('#category_items>div').hover(function() {
            $(this).children(':last').show();
        }, function() {
            $(this).children(':last').hide();
        });
    }
    function showhide(){
        $('[name=show_hide]').hover(function() {
            var id = this.id + '_items';
            $('#'+id).show();
        }, function() {
            var id = this.id + '_items';
            $('#'+id).hide();
        });
    }
})