美文网首页
前端知识京东详情页

前端知识京东详情页

作者: Pickupthesmokes | 来源:发表于2018-09-24 20:30 被阅读0次

    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();
            });
        }
    })
    

    相关文章

      网友评论

          本文标题:前端知识京东详情页

          本文链接:https://www.haomeiwen.com/subject/clyhoftx.html