JavaScript 代码在 localhost 中有效，但在实时站点中无效？-6ren

JavaScript 代码在 localhost 中有效，但在实时站点中无效？

转载作者：行者123 更新时间：2023-11-28 16:25:38

我的代码在本地主机上运行时出现问题，但当我将它上传到服务器时却没有。我正在尝试在其他图像上做一个标记，每个图像上都有一个标记——当标记被点击时，会有一种缩放效果，你会看到下面的图像。我已经阅读了有类似问题的人的帖子和解决方案但它似乎对我不起作用 - 我已经检查了路径是否良好并且不存在所有可能出现的区分大小写的问题。如果有人可以帮助我，我将非常感激，因为我对编码真的很陌生。我尝试使用 FireBug，但它对我帮助不大。

我的 html 文件:

<div id="zt-container" class="zt-container">
            <div class="zt-item" data-id="zt-item-1">
                <img class="zt-current" src="http://lorempixel.com/400/200/" height="100%"/>
                <div class="zt-tag zt-tag1" data-dir="1" data-link="zt-item-2" data-zoom="15" data-speed="850" data-delay="100" style="top:85px;left:165px;width:50px; height:30px;"></div>
            </div>
            <div class="zt-item" data-id="zt-item-2">
                <img class="zt-current" src="http://lorempixel.com/400/200/" height="100%"/>
                <div class="zt-tag zt-tag2" data-dir="1" data-link="zt-item-3" data-zoom="20" data-speed="850" data-delay="200" style="top:171px;left:194px;width:50px;height:30px;"></div>
                <!--<div class="zt-tag" data-dir="1" data-link="zt-item-4" data-zoom="2" data-speed="550" data-delay="0" style="top:155px;left:10px;width:150px;height:100px;"></div>-->
                <!--<div class="zt-tag" data-dir="1" data-link="zt-item-5" data-zoom="15" data-speed="850" data-delay="0" style="top:15px;left:10px;width:90px;height:50px;"></div>-->
                <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="15" data-speed="700" data-delay="0"></div>
            </div>
            <div class="zt-item" data-id="zt-item-3">
                <img class="zt-current" src="http://lorempixel.com/400/200/" height="100%"/>
        <div class="zt-tag zt-tag3" data-dir="1" data-link="zt-item-4" data-zoom="10" data-speed="550" data-delay="100" style="top:42px;left:287px;width:130px;height:120px; transform: rotate(-6.6342deg);"></div>
                <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-2" data-zoom="10" data-speed="650" data-delay="20"></div>
            </div>
            <div class="zt-item" data-id="zt-item-4">
                <img class="zt-current" src="http://lorempixel.com/400/200/" height="100%"/>
        <div class="zt-tag zt-tag4" data-dir="1" data-link="zt-item-5" data-zoom="30" data-speed="1050" data-delay="190" style="top:103px;left:184px;width:50px;height:100px; transform: rotate(0deg);"></div>
                <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-3" data-zoom="2" data-speed="550" data-delay="0"></div>
            </div>
            <div class="zt-item" data-id="zt-item-5">
                <img class="zt-current" src="http://lorempixel.com/400/200/" height="100%"/>
                <div class="zt-tag zt-tag5" data-dir="1" data-link="zt-item-6" data-zoom="8" data-speed="650" data-delay="10" style="top:110px;left:318px;width:60px;height:50px; transform: rotate(0deg);"></div>
                <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-4" data-zoom="15" data-speed="700" data-delay="0"></div>
            </div>
            <div class="zt-item" data-id="zt-item-6">
                <img class="zt-current" src="http://lorempixel.com/400/200/" height="100%"/>
                <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-5" data-zoom="8" data-speed="650" data-delay="0"></div>
            </div>

        </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="JS/jquery.transform-0.9.3.min_.js"></script>
    <script type="text/javascript" src="JS/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="JS/jquery.zoomtour.js"></script>
    <script type="text/javascript">

            $('#zt-container').zoomtour();

    </script>

我的 jquery.easing.1.3.js 文件:

    jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
    def: 'easeOutQuad',
    swing: function (x, t, b, c, d) {
        //alert(jQuery.easing.default);
        return jQuery.easing.[jQuery.easing.def](x, t, b, c, d);
    },
    easeInQuad: function (x, t, b, c, d) {
        return c*(t/=d)*t + b;
    },
easeOutQuad: function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
    return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t + b;
    return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
    return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
    return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
    return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
    return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
    return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
    return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
    return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
    if (t==0) return b;
    if (t==d) return b+c;
    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
    return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
    return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
    return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
    if ((t/=d) < (1/2.75)) {
        return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
},
easeInOutBounce: function (x, t, b, c, d) {
    if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
    return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});

我的 jquery.zoomtour.js 文件:

    (function($) {
var tag         = {
        saveInitialData     : function( $tag ) {
            $tag.data({
                width   : $tag.width(),
                height  : $tag.height(),
                left    : $tag.position().left,
                top     : $tag.position().top
            }).addClass( $tag.data('link') );
        },
        rotate              : function( $tag, cache ) {

            // element's center
            var center      = {
                x   : $tag.position().left + $tag.width() / 2,
                y   : $tag.position().top + $tag.height() / 2
            };

            var quadrant    = tag.getElementQuadrant( center, cache );
            // distance from element's center to the quadrants origin
            var dist_element;
            switch( quadrant ) {
                case 1 :
                    dist_element = Math.sqrt( Math.pow( ( center.x - 0 ), 2 ) + Math.pow( ( center.y - 0 ), 2 ) );
                    break;
                case 2 :
                    dist_element = Math.sqrt( Math.pow( ( center.x - cache.ztdim.x ), 2 ) + Math.pow( ( center.y - 0 ), 2 ) );
                    break;
                case 3 :
                    dist_element = Math.sqrt( Math.pow( ( center.x - 0 ), 2 ) + Math.pow( ( center.y - cache.ztdim.y ), 2 ) );
                    break;
                case 4 :
                    dist_element = Math.sqrt( Math.pow( ( center.x - cache.ztdim.x ), 2 ) + Math.pow( ( center.y - cache.ztdim.y ), 2 ) );
                    break;
            }
            var anglefactor = 25;
            var angle   = ( ( cache.dist_center - dist_element ) / cache.dist_center ) * anglefactor;

            switch( quadrant ) {
                case 1 :
                    $tag.data( 'rotate', angle ).transform({'rotate'    : angle + 'deg'});
                    break;
                case 2 :
                    $tag.data( 'rotate', -angle ).transform({'rotate'   : -angle + 'deg'});
                    break;
                case 3 :
                    $tag.data( 'rotate', -angle ).transform({'rotate'   : -angle + 'deg'});
                    break;
                case 4 :
                    $tag.data( 'rotate', angle ).transform({'rotate'    : angle + 'deg'});
                    break;
            }

        },
        getElementQuadrant  : function( c, cache ) {
            if( c.x <= cache.ztdim.x / 2 && c.y <= cache.ztdim.y / 2 )
                return 1;
            else if( c.x > cache.ztdim.x / 2 && c.y <= cache.ztdim.y / 2 )
                return 2;
            else if( c.x <= cache.ztdim.x / 2 && c.y >= cache.ztdim.y / 2 )
                return 3;
            else if( c.x > cache.ztdim.x / 2 && c.y > cache.ztdim.y / 2 )
                return 4;
        }
    },
    viewport    = {
        zoom                : function( $ztcontainer, $tag, cache, settings ) {
            var $ztitem         = $tag.closest('div.zt-item'),
                ztitemid        = $ztitem.data('id'),
                $ztimage        = $ztitem.children('img.zt-current'),

                zoomfactor      = $tag.data('zoom'),
                speedfactor     = $tag.data('speed'),
                imgdelayfactor  = $tag.data('delay'),
                link            = $tag.data('link'),
                dir             = $tag.data('dir'),

                $new_ztitem     = $ztcontainer.find('div.' + link),
                $new_ztitemimage= $new_ztitem.find('img.zt-current'),

                zoomAnimation   = true;

            if( !link ) return false;

            if( zoomfactor === undefined || speedfactor === undefined || imgdelayfactor === undefined || dir === undefined )
                zoomAnimation = false;

            ( dir === 1 ) ?
                viewport.zoomin( $tag, $ztitem, ztitemid, $ztimage, zoomfactor, speedfactor, imgdelayfactor, zoomAnimation, $new_ztitem, $new_ztitemimage, cache, settings ) :
                viewport.zoomout( $tag, $ztitem, ztitemid, $ztimage, zoomfactor, speedfactor, imgdelayfactor, zoomAnimation, $new_ztitem, $new_ztitemimage, cache, settings );
        },
        zoomin              : function( $tag, $ztitem, ztitemid, $ztimage, zoomfactor, speedfactor, imgdelayfactor, zoomAnimation, $new_ztitem, $new_ztitemimage, cache, settings ) {

            var el_l            = $tag.data('left') + $tag.data('width') / 2,
                el_t            = $tag.data('top') + $tag.data('height') / 2;

            $.fn.applyStyle     = ( zoomAnimation ) ? $.fn.animate : $.fn.css;

            $ztimage.applyStyle( {
                width   : cache.ztdim.x * zoomfactor + 'px',
                height  : cache.ztdim.y * zoomfactor + 'px',
                left    : - ( ( zoomfactor * ( 2 * el_l ) ) - ( 2 * el_l ) ) / 2 + 'px',
                top     : - ( ( zoomfactor * ( 2 * el_t ) ) - ( 2 * el_t ) ) / 2 + 'px'
            }, $.extend( true, [], { duration : speedfactor } ) );

            // hide all the other tags (for the current item)
            $ztitem.children('div.zt-tag').hide();

            var imgAnimationCss = {
                width   : cache.ztdim.x + 'px',
                height  : cache.ztdim.y + 'px',
                left    : '0px',
                top     : '0px',
                opacity : 1
            };
            if( settings.rotation && !cache.ieLte8 )
                imgAnimationCss.rotate  = '0deg';

            var newztimg        = $new_ztitemimage.attr('src');

            var tagCss  = {
                position    : 'absolute',
                width       : $tag.data('width'),
                height      : $tag.data('height'),
                left        : $tag.data('left'),
                top         : $tag.data('top')
            };
            if( settings.rotation && !cache.ieLte8 )
                tagCss.rotate   = $tag.data('rotate') + 'deg';

            $ztitem.append(
                $('<img src="' + newztimg + '" class="zt-temp"></img>')
                .css( tagCss )
                .delay(imgdelayfactor)
                .applyStyle( imgAnimationCss, $.extend( true, [], { duration : speedfactor, easing : settings.zoominEasing, complete : function() {
                    viewport.zoominCallback( $(this), $new_ztitem, $ztitem, $ztimage, cache );
                } } ) )
            );

            if( !zoomAnimation )
                viewport.zoominCallback( $ztitem.find('img.zt-temp'), $new_ztitem, $ztitem, $ztimage, cache );
        },
        zoominCallback      : function( $zttemp, $new_ztitem, $ztitem, $ztimage, cache ) {
            $(this).remove();

            $new_ztitem
            .show()
            .children('div.zt-tag')
            .show();

            $ztitem.hide();

            $ztimage.css({
                width   : cache.ztdim.x + 'px',
                height  : cache.ztdim.y + 'px',
                left    : '0px',
                top     : '0px'
            });

            cache.animTour  = false;
        },
        zoomout             : function( $tag, $ztitem, ztitemid, $ztimage, zoomfactor, speedfactor, imgdelayfactor, zoomAnimation, $new_ztitem, $new_ztitemimage, cache, settings ) {

            var $originalTag    = $new_ztitem.children( 'div.' + ztitemid ),
                o_tag_w         = $originalTag.data('width'),
                o_tag_h         = $originalTag.data('height'),
                o_tag_l         = $originalTag.data('left'),
                o_tag_t         = $originalTag.data('top'),
                o_tag_r         = $originalTag.data('rotate'),

                el_l            = o_tag_l + o_tag_w / 2,
                el_t            = o_tag_t + o_tag_h / 2;

            $.fn.applyStyle     = ( zoomAnimation ) ? $.fn.animate : $.fn.css;

            $new_ztitemimage.css({
                width   : cache.ztdim.x * zoomfactor + 'px',
                height  : cache.ztdim.y * zoomfactor + 'px',
                left    : - ( ( zoomfactor * ( 2 * el_l ) ) - ( 2 * el_l ) ) / 2 + 'px',
                top     : - ( ( zoomfactor * ( 2 * el_t ) ) - ( 2 * el_t ) ) / 2 + 'px'
            });

            $ztitem.hide();

            var $new_ztitem_tags = $new_ztitem.children('div.zt-tag');
            $new_ztitem_tags.hide();

            $new_ztitem.show();

            var expandCss   = {
                width   : cache.ztdim.x + 'px',
                height  : cache.ztdim.y + 'px',
                left    : '0px',
                top     : '0px',
                opacity : 1
            };
            if( settings.rotation && !cache.ieLte8 )
                expandCss.rotate    = '0deg';

            var imgAnimationCss = {
                width   : o_tag_w + 'px',
                height  : o_tag_h + 'px',
                left    : o_tag_l + 'px',
                top     : o_tag_t + 'px',
                opacity : 0
            };
            if( settings.rotation && !cache.ieLte8 )
                imgAnimationCss.rotate  = o_tag_r + 'deg';

            $new_ztitem.append(
                $('<img src="' + $ztimage.attr('src') + '" class="zt-temp"></img>')
                .css( expandCss )
            )

            var $zttemp = $new_ztitem.find('img.zt-temp');

            $zttemp.applyStyle( imgAnimationCss, $.extend( true, [], { duration : speedfactor, complete : function() {
                $(this).remove();
            } } ) );

            if( !zoomAnimation )
                $zttemp.remove();

            $new_ztitemimage
            .delay( imgdelayfactor )
            .applyStyle( {
                width   : cache.ztdim.x + 'px',
                height  : cache.ztdim.y + 'px',
                left    : '0px',
                top     : '0px'
            }, $.extend( true, [], { duration : speedfactor, easing : settings.zoomoutEasing, complete : function() {
                viewport.zoomoutCallback( $new_ztitem_tags, cache );
            } } ) );

            if( !zoomAnimation )
                viewport.zoomoutCallback( $new_ztitem_tags, cache );

        },
        zoomoutCallback     : function( $new_ztitem_tags, cache ) {
            $new_ztitem_tags.show();
            cache.animTour  = false;
        }
    },
    methods     = {
        init                : function( options ) {

            if( this.length ) {

                var settings = {
                    rotation        : true, // if true the tags are rotated
                    zoominEasing    : '',   // zoom out animation easing. ex: easeOutBounce , easeOutBack
                    zoomoutEasing   : ''    // zoom out animation easing.
                };

                return this.each(function() {

                    // if options exist, lets merge them with our default settings
                    if ( options ) {
                        $.extend( settings, options );
                    }

                    var $ztcontainer        = $(this),
                        // the container's items / images
                        $ztitems            = $ztcontainer.children('div.zt-item'),
                        // large images
                        $ztimages           = $ztitems.children('img.zt-current'),
                        // the tags
                        $zttags             = $ztitems.children('div.zt-tag'),
                        // some values we will need later..
                        cache               = {
                            // container's width & height
                            ztdim       : {
                                x   : $ztcontainer.width(),
                                y   : $ztcontainer.height()
                            },
                            // check if the browser is <= IE8
                            ieLte8      : ($.browser.msie && parseInt($.browser.version) <= 8),
                            // true if currently animating
                            animTour    : false
                        };

                    // add a loading image until all the images are loaded
                    var $loading            = $('<div class="zt-loading"></div>').prependTo( $ztcontainer );

                    // add the class with value "id" to each one of the items. We will need this later to access the items.
                    $ztitems.each( function() {
                        var $ztitem = $(this);
                        $ztitem.addClass( $ztitem.data('id') );
                    });

                    // distance from the container's center to one of its corners
                    // this will be needed to calculate how much we rotate each tag
                    if( settings.rotation && !cache.ieLte8 )
                        cache.dist_center       = Math.sqrt( Math.pow( ( cache.ztdim.x / 2 ), 2 ) + Math.pow( ( cache.ztdim.y / 2 ), 2 ) );

                    $zttags.each(function() {
                        var $tag    = $(this);
                        // save each tag's widh height left and top
                        tag.saveInitialData( $tag );
                        // rotate the tags
                        if( settings.rotation && !cache.ieLte8 && !$tag.hasClass('zt-tag-back') )
                            tag.rotate( $tag, cache );
                    }).hide(); // hide the tags

                    // show the first item
                    $ztitems.not(':first').hide();

                    // preload all large images
                    var loaded      = 0,
                        totalImages = $ztimages.length;

                    $ztimages.each( function() {
                        $('<img>').load( function() {
                            ++loaded
                            if( loaded === totalImages ) {
                                // show all large images (just the first will be visible)
                                $ztimages.show();

                                // hide the loading image
                                $loading.hide();

                                // show the tags
                                $zttags.show();

                                // clicking one tag, zooms in / out
                                $zttags.bind('click.zoomtour', function( e ) {
                                    if( cache.animTour ) return false;
                                    cache.animTour  = true;

                                    var $tag            = $(this);
                                    viewport.zoom( $ztcontainer, $tag, cache, settings );
                                });

                                // hide / show tags on mouse hover
                                $ztcontainer.bind('mouseenter.zoomtour', function( e ) {
                                    if( !cache.animTour )
                                        $zttags.show();
                                }).bind('mouseleave.zoomtour', function( e ) {
                                    if( !cache.animTour )
                                        $zttags.hide();
                                });

                            }
                        }).attr( 'src', $(this).attr('src') );
                    });
                });
            }
        }
    };

$.fn.zoomtour = function(method) {
    if ( methods[method] ) {
        return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
        return methods.init.apply( this, arguments );
    } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.zoomtour' );
    }
};

})(jQuery);

我的 CSS:

    .zt-container{
width:451px;
height:350px;
position:relative;
overflow:hidden;
margin:20px auto;
margin-top: 15%;
background:#fff;
border:7px solid #fff;
-moz-box-shadow:1px 1px 3px #ddd;
-webkit-box-shadow:1px 1px 3px #ddd;
box-shadow:1px 1px 3px #ddd;
margin-bottom: 80px;
}
@media (max-width: 992px){
.zt-container{
    margin-bottom: 58px;
}
}
@media (max-width: 360px){
.zt-container{
    width:301px;
    height:200px;
}
.zt-tag1{
    top:40px !important;
    left:75px !important;
    width:50px !important;
    height:30px !important;
}
.zt-tag2{
    top:85px !important;
    left:104px !important;
    width:50px !important;
    height:30px !important;
}
.zt-tag3{
    top:27px !important;
    left:187px !important;
    width:60px !important;
    height:50px !important;
}
.zt-tag4{
    top:45px !important;
    left:84px !important;
    width:50px !important;
    height:90px !important;
    transform: rotate(0deg) !important;
}
.zt-tag5{
    top:75px !important;
    left:100px !important;
    width:60px !important;
    height:50px !important;
    transform: rotate(0deg) !important;
}
}
.zt-current{
position:absolute;
display: none;
top: 0;
left: 0;
 }
img.zt-temp{
position:absolute;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
 }
.zt-tag{
position:absolute;
z-index:10;
border:2px solid #fff;
background:transparent url(../images/tag.png) repeat top left;
width:50px;
height:37px;
cursor:pointer;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.7);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.7);
box-shadow:1px 1px 2px rgba(0,0,0,0.7);
}
.zt-tag-back{
width:30px;
height:20px;
left:50%;
bottom:0px;
margin-left:-16px;
background:#fff url(../images/back.png) no-repeat center center;
-moz-border-radius:5px 5px 0px 0px;
-webkit-border-radius:5px 5px 0px 0px;
border-radius:5px 5px 0px 0px;
border:1px solid #fff;
border-bottom:none;
}
.zt-loading{
position:absolute;
width:50px;
height:50px;
top:50%;
left:50%;
margin:-25px 0 0 -25px;
opacity:0.8;
z-index:99999;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
background:#fff url(../images/ajax-loader.gif) no-repeat center center;
}

注意:在本地主机中使用 .zt-current{ display: none;} 一切正常。我把它放在 display: block;它也可以工作，但一开始它不想工作。在站点在线显示:block；您可以看到其中一张图片，但它不能解决 JavaScript 问题。无论如何，当使用 Inspect Element 并将鼠标悬停在图像的 src 上时，您可以看到它，所以我认为问题不在于路径。我把它放在 fiddle 里，它也不起作用。你可以在这里查看 https://jsfiddle.net/goL6aerm/ .事实上，在 fiddle 中，我看到了在本地主机和在线网站上都看不到的另一件事——我们可以同时看到图像上的所有标记，而通常我们只会看到与这张照片相关的标记。

最佳答案

打开你的控制台。 未捕获的语法错误:意外的标记 [

easing.[jQuery.easing.def] 那是无效的，应该是easing[jQuery.easing.def]

关于JavaScript 代码在 localhost 中有效，但在实时站点中无效？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45276072/

文章推荐： jquery - 向后滚动时回到旧样式

文章推荐： python - 获取数据框中列的每个元素的第一个字符

文章推荐： python - 通过垂直拆分文本文件创建列表

文章推荐： javascript - jQuery 隐藏所有没有类的元素

c - 我尝试理解 [c 代码 -> 汇编] 代码
我尝试理解[c代码 -> 汇编]代码 void node::Check( data & _data1, vector& _data2) { -> push ebp -> mov ebp,esp ->
c# - 在当前表单(代码)的上下文中从字符串动态运行 C# 代码
我需要在当前表单(代码)的上下文中运行文本文件中的代码。其中一项要求是让代码创建新控件并将其添加到当前窗体。例如，在Form1.cs中: using System.Windows.Forms; ..
c# - c++代码(malloc方法)到c#代码
我有此 C++ 代码并将其转换为 C# (.net Framework 4) 代码。有没有人给我一些关于 malloc、free 和 sprintf 方法的提示？ int monate = ee; d
C 代码，简单的 Web 服务器(代码 OK)
我的网络服务器代码有问题 #include #include #include #include #include #include #include int
html - 将特定列表元素置于斜体的 CSS 代码(不更改 html 代码)
给定以下 html 代码，将列表中的第三个元素(即“美丽”一词)以斜体显示的 CSS 代码是什么？当然，我可以给这个元素一个 id 或一个 class，但 html 代码必须保持不变。谢谢
javascript - 是否有一些库可用于 IQR 代码(不是 QR 代码)？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
macros - 在 Inno Setup [代码] 部分将宏扩展为 Pascal 代码
我试图制作一个宏来避免重复代码和注释。我试过这个: #define GrowOnPage(any Page, any Component) Component.Width := Page.Surfa
c# - 我正在尝试将我的旧 c++ 代码 "translate"转换为 c# 代码
我正在尝试将我的旧 C++ 代码“翻译”成头条新闻所暗示的 C# 代码。问题是我是 C# 中的新手，并不是所有的东西都像 C++ 中那样。在 C++ 中这些解决方案运行良好，但在 C# 中只是不能。我
r - 让 Visual Studio 代码(自动)格式化 R 代码
在 Windows 10 上工作，R 语言的格式化程序似乎没有在 Visual Studio Code 中完成它的工作。我试过R support for Visual Studio Code和 R-T
dynamic - 是否可以在 Python 脚本中生成和执行 Python 代码？ [动态 Python 代码]
我正在处理一些报告(计数)，我必须获取不同参数的计数。非常简单但乏味。一个参数的示例查询: qCountsEmployee = ( "select count(*) from %s wher
ios - 随机和偶然的网络错误(NSURLErrorDomain 代码=-1001 和 NSURLErrorDomain 代码=-1005)
最近几天我尝试从 d00m 调试网络错误。我开始用尽想法/线索，我希望其他 SO 用户拥有可能有用的宝贵经验。我希望能够提供所有相关信息，但我个人无法控制服务器环境。整个事情始于用户注意到我们应用程
javascript - visual studio 代码 intellisense 不适用于 dojo amd 代码
我有一个 app.js 文件，其中包含如下 dojo amd 模式代码: require(["dojo/dom", ..], function(dom){ dom.byId('someId').i
cuda - 'code=sm_X' 是否仅嵌入二进制(cubin)代码，或 PTX 代码，或两者？
我对“-gencode”语句中的“code=sm_X”选项有点困惑。一个例子:NVCC 编译器选项有什么作用 -gencode arch=compute_13,code=sm_13 嵌入库中？只有
javascript - 在 Javascript 下拉列表中添加 HTML 代码，Javascript 不评估 HTML 代码
我为我的表格使用 X-editable 框架。但是我有一些问题。 $(document).ready(function() { $('.access').editable({
python - 在 linux 中运行 flask/python 代码？基本 flask 代码
我一直在通过本教程学习 flask/python http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-wo
vim - G 代码 M 代码 VI 和 EMACS 的 CNC 语法
我想将 Vim 和 EMACS 用于 CNC、G 代码和 M 代码。 Vim 或 EMACS 是否有任何语法或模式来处理这种类型的代码？最佳答案一些快速搜索使我找到了 this vim 和 thi
iphone - 寻找关于将 Pre-Storyboard 代码 (XCode4) 移动到 Storyboard 代码 (XCode5) 的教程
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。想改进这个问题？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve this
vim - 如何让 Vim 理解 *.md 文件包含 Markdown 代码，而不是 Modula-2 代码？
这个问题在这里已经有了答案: Enabling markdown highlighting in Vim (5 个回答) 6年前关闭。当我在 Vim 中编辑包含 Markdown 代码的 READM
ios - 错误域=AVFoundationErrorDomain 代码=-11800 "The operation could not be completed"{错误域=NSOSStatusErrorDomain 代码=-16976 "(null)"}
我正在 Swift3 iOS 中开发视频应用程序。基本上我必须将视频 Assets 和音频与淡入淡出效果合并为一个并将其保存到 iPhone 画廊。为此，我使用以下方法: private func d
jenkins - 无法通过 Jenkins 管道作业的 jenkinsfile 中的 Groovy 代码(或 java 代码)创建文件
pipeline { agent any stages { stage('Build') { steps { e

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

JavaScript 代码在 localhost 中有效，但在实时站点中无效？