Question

我试图将此按钮放在图片右下角的快速浏览中，而不是居中，但我无法弄清楚如何操作。代码使用顶部和左侧偏移将按钮定位在中心。我怎样才能将它放在右下角呢？要查看我希望实现的定位示例，请转到：http://www.shrimptoncouture.com/collections/all-clothing。

这是我与之合作的内容。任何帮助将不胜感激：

Cmsmart.noConflict();
Cmsmart(function($) {
    var producturl;

    function geturlrewrite(){
        var mypath = arguments[0];
        var patt = /\/[^\/]{0,}$/ig;
        if(mypath){
            if(mypath[mypath.length-1]=="/"){
                mypath = mypath.substring(0,mypath.length-1);
                return (mypath.match(patt)+"/");
            }
            return mypath.match(patt);
        }
        return '';  
    }

    function urltrim(){
        return arguments[0].replace(/^\s+|\s+$/g,"");
    }

    function installquickview(){
        if (typeof CMSMART == 'undefined') return;
        var argInput = arguments[0];
        var productlistBlocks = $(argInput.productlistClassArr);
        var datasaved = [];
        var mypath = 'cmsmquickview/index/index';
        if(CMSMART.QuickView.BASE_URL.indexOf('index.php') == -1){
            mypath = 'cmsmquickview/index/index';
        }else{
            mypath = 'cmsmquickview/index/index';
        }
        var baseUrl = CMSMART.QuickView.BASE_URL + mypath;

        var _quickviewbutton = '<a id="cmsmart_quickview_button" href="#">' + CMSMART.QuickView.BOTTON_LABEL + '</a>';
        var _quickform = '<div id="csmm_quickform">' + 
            '<div id = "quickviewshow" ></div>' + 
        '</div>';

        $(document.body).append(_quickform);
        $(document.body).append(_quickviewbutton);

        var quickviewButton = $('#cmsmart_quickview_button');
        //alert(encodeURIComponent(CMSMART.QuickView.BASE_URL + 'ab=3dfd&ddfdfd=234'));
        $.each(productlistBlocks, function(i, vl){
        var productlist = $(vl);
        $.each(productlist, function(index, value) {
            var reloadurl = '';

            var aClass = argInput.aClass[i]?argInput.aClass[i]:argInput.aClass[0];
            producturl = $(aClass, value);

            if(producturl.attr('href')){
                var producturlpath = producturl.attr('href').replace(CMSMART.QuickView.BASE_URL,"");
                //var producturlpath = geturlrewrite(producturl.attr('href'))[0];
                //producturlpath[0] == "\/" ? producturlpath = producturlpath.substring(1,producturlpath.length) : producturlpath;
                //producturlpath = urltrim(producturlpath);

                reloadurl += baseUrl+ ("/path/"+producturlpath).replace(/\/\//g,"/");
                //alert(reloadurl);
                var imgClass = argInput.imgClass[i]?argInput.imgClass[i]:argInput.imgClass[0];
                $(this).bind('mouseover', function() {
                    //var o = $(this).offset();
                    //var o = $(this);
                    var o = $(imgClass+':eq(0)', this);

                    $('#cmsmart_quickview_button').attr('href',reloadurl).show()
                        .css({
                        'top': o.offset().top+(o.height() - quickviewButton.height())/2+'px',
                            'left': o.offset().left+(o.width() - quickviewButton.outerWidth())/2+'px',
                            'visibility': 'visible'
                        });
                });
                $(value).bind('mouseout', function() {
                    $('#cmsmart_quickview_button').hide();
                });
            }
        });
        });

        if(CMSMART.QuickView.CENTER)
        { 
            $("#quickviewshow").css('margin', ($(window).height() / 2 - $("#quickviewshow").height() / 2) + "px auto auto auto"); 
        }

        $('#cmsmart_quickview_button')
            .bind('mouseover', function() {
                $(this).show();
            })
            .bind('click', function() {
                idbyurl = ($(this).attr('href')).replace(/\W/g,"");
                showqv();
                $("#quickviewshow").html('<a id="cmsmart_quickview_button_close" title="Close Quick View"> </a><a class="quickviewloading"><a>');
                $("#cmsmart_quickview_button_close").on( "click", function() {
                    closeqv();
                    $("div.zoomContainer").remove();
                });

                $(this).hide();         
                if(datasaved[idbyurl]){
                    $("#quickviewshow").html('<a id="cmsmart_quickview_button_close" title="Close Quick View"> </a>');
                    $("#cmsmart_quickview_button_close").on( "click", function() {
                        closeqv();
                    });
                    $("#quickviewshow").append(datasaved[idbyurl]);             
                    showqv();               
                    relimg();
                    return false;               
                }           
                else{
                    $.ajax({
                        url: $(this).attr('href'),
                        cache: false
                    }).done(function( html ) {

                        $("#quickviewshow").html('<a id="cmsmart_quickview_button_close" title="Close Quick View"> </a>');
                        $("#cmsmart_quickview_button_close").on( "click", function() {
                            closeqv();
                            $("div.zoomContainer").remove();
                        });                                                 
                        $("#quickviewshow").append(html);                   
                        showqv();                       
                        datasaved[idbyurl] = html;
                        relimg();
                    });
                }

                return false;
            });

            $('#csmm_quickform').click(function(e) {
                if($(e.target).is('#quickviewshow, #quickviewshow *')) return;
                $('#csmm_quickform').hide();
                $("div.zoomContainer").remove();
            });

    }

    $( document ).ready(function() {
        installquickview(CMSMART.QuickView.BUTTON_CONFIG);
    });

    $(window).resize(function() {
        $("#quickviewshow").css('margin', ($(window).height() / 2 - $("#quickviewshow").height() / 2) + "px auto auto auto");
    });


    function relimg(){
        maxh = $('div.product-quickview').outerHeight() - 45;
        if($('div.qvtabhead')) maxh = maxh - $('div.qvtabhead').outerHeight();
        if($('div.qvformaddtocart')) maxh = maxh - $('div.qvformaddtocart').outerHeight();
        if($('div.tabquickshow')) $('div.tabquickshow').css('max-height', maxh + "px"); 

        //submitbqv();
        $('#showlargeimg').elevateZoom({ zoomWindowWidth:300, zoomWindowHeight:300, borderSize: 2, zoomWindowOffetx:15, cursor:'move' });
         $('#mycarousel').jcarousel({
            scroll: 4
        });

        $("li img.p_image_hover").click(
            function () {
                smallImage = $(this).attr('src');
                largeImage = $(this).attr('data-zoom-image');
                $('img#showlargeimg').attr('src', smallImage);
                var ez = $('#showlargeimg').data('elevateZoom');
                ez.swaptheimage(smallImage, largeImage);
            }
        );

        $('a.tabquickviewcontrol').click(
            function(){     
                $('a.tabquickviewcontrol').removeClass("highlight");
                $(this).addClass("highlight");
                var divsl = $(this).attr('href');
                $('.tabquickshow').css('display', 'none');
                $(divsl).css('display', 'block');
                return false;
            }
        )
    }

    function showqv(){ $("#csmm_quickform").css("display", "block"); }
    function closeqv(){ $("#csmm_quickform").css("display", "none"); }

    function btcloseqv(){
        $("#cmsmart_quickview_button_close").on( "click", function() {
            $("#csmm_quickform").css("display", "none");
        });
    }

    function submitbqv(){
        var fr = $('#product_addtocart_form');
        var btc = $('.btn-cart', fr);

        btc.attr('onclick', '');
        btc.click(function(){
            var cansubmit = true;
            $('select.required-entry', fr).each(function(){
                if($(this).val() == ''){
                    $(this).addClass('validation-failed');
                    $(this).focus();
                    cansubmit = false;
                    return false;
                }else { $(this).removeClass('validation-failed'); }
            });
            if(cansubmit) fr.submit();
        });
    }
    btcloseqv();
});

Answer 1

可能是这样的：

            $('#cmsmart_quickview_button').attr('href',reloadurl).show()
                .css({
                'top' : o.offset().top + o.height() - quickviewButton.height()+'px',
                'left': o.offset().left+ o.width() - quickviewButton.outerWidth()+'px',
                    'visibility': 'visible'
                });

如果不是这样，请继续使用该代码，直到获得所需内容为止。您可以尝试o.offset().bottom和o.offset().right，但我不知道它们是否已定义。

Js位置按钮位于右下角而不是居中

1 个答案: