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