-1
我的代碼在本地主機上工作時出現問題，但沒有上傳到服務器時出現問題。 我試圖做一個在其他圖像上的標記 - 每個標記點擊時有一種縮放效果，你會看到下面的圖像。 我已閱讀有類似問題的人的帖子和解決方案，但它似乎並不適用於我 - 我已檢查路徑是否良好，並且可能發生的所有區分大小寫的問題都不存在。 如果有人可以幫助我，我真的很感激，因爲我真的很陌生。 我嘗試過使用FireBug，但它對我沒有多大幫助。JavaScript代碼在localhost中運行，但不在live站點中運行？
我的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電流{顯示：無;}在本地主機一切正常。我把它展示出來：block;它也可以工作，但在開始時並不想工作。在網站上顯示：block;你可以看到其中一個圖像，但它不能解決JavaScript問題。無論如何，當使用Inspect元素並將鼠標懸停在圖像的src上時，您可以看到它，所以問題不在於我認爲的道路。 我已經把它放在小提琴中，它也不起作用。您可以在這裏查看https://jsfiddle.net/goL6aerm/。事實上，在小提琴中，我看到了另一件我在本地主機和網站上看不到的東西 - 我們可以一次看到圖像上的所有標記，通常我們只能看到與該照片相關的標記。
我已將其更改爲緩動[jQuery.easing.def] - 它並未更改網站上的任何內容，但它阻止了本地主機中的腳本。 – Anjie
你的控制檯現在說什麼？任何其他錯誤？ –
它說你寫了什麼SyntaxError：之後缺少名字。運算符 返回jQuery.easing。[jQuery.easing.def]（x，t，b，c，d）;但即使使用正確的語法，它也不起作用。此外在CSS錯誤：引導工具提示需要Tether（http://tether.io/）和黃色警告預期'無'，URL或過濾器功能，但發現'progid'。解析'filter'的值時出錯。聲明下降了。濾波器：的progid：DXImageTransform.Microsoft.Alpha（不透明度= 0）;.並在黃色5錯誤解析'變換'的值。聲明下降了。 transform：scale（1）translate（579.1500091552734px，NaNpx） – Anjie