以下 JQuery 插件在 IE 和 Firefox 中运行良好，但在 Chrome 中无法运行。 Chrome 根本无法识别该插件，并且说明文字位于图片下方。它们应该出现在图像的顶部并具有滑动效果。
http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/
关于为什么它在 Chrome 中不起作用的任何想法？任何想法将不胜感激!
这是我的代码:
<div class="demo">
<div id="capslide_img_cont" class="ic_container" style="margin-right: 22px;">
<img src="/IC/images/modular-homes.jpg" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>MODULAR HOMES</h3>
<p class="ic_text">
Modular Homes are built in a factory environment to state and local building codes. <br><br>
<a href="/home-plans-and-photos/modular-homes">Learn more about modular homes >></a>
</p>
</div>
</div>
</div>
<div class="demo">
<div id="capslide_img_cont2" class="ic_container" style="margin-right: 22px;">
<img src="/IC/images/manufactured-homes.jpg" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>MANUFACTURED HOMES</h3>
<p class="ic_text">
Manufactured Homes are built in a factory envirnment to the federal HUD building code. <br><br>
<a href="/home-plans-and-photos/manufactured--homes">Learn more about manufactured homes >></a>
</p>
</div>
</div>
</div>
<div class="demo">
<div id="capslide_img_cont3" class="ic_container" style="margin-right: 0px;">
<img src="/IC/images/park-model-homes.jpg" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>PARK MODEL HOMES</h3>
<p class="ic_text">
Park Model Homes are built in a factory envirnoment to the ANSI code. <br><br>
<a href="/home-plans-and-photos/park-model-homes">Learn more about park model homes >></a>
</p>
</div>
</div>
</div>
<div style="clear: both;"></div>
<div class="demo">
<div id="capslide_img_cont4" class="ic_container" style="margin-right: 22px;">
<img src="/IC/images/Manufactured-Home-Map.jpg" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>FIND A RETAILER</h3>
<p class="ic_text">
There's no better place to find the home of your dreams than at a Champion retail sales center. <br><br>
<a href="/where-to-buy">Search for retailer in your area >></a>
</p>
</div>
</div>
</div>
<div class="demo">
<div id="capslide_img_cont5" class="ic_container" style="margin-right: 22px;">
<img src="/IC/images/about-champion-home-builders.jpg" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>ABOUT CHAMPION</h3>
<p class="ic_text">
Throughout our long history, Champion has been acknowledged as a leader in the manufactured housing industry and one of the largest modular homebuilders in North America. <br><br>
<a href="/about-champion">Learn more about Champion >></a>
</p>
</div>
</div>
</div>
<div class="demo">
<div id="capslide_img_cont6" class="ic_container" style="margin-right: 0px;">
<img src="/IC/images/home-buyers-guide.jpg" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>HOMEBUYERS GUIDE</h3>
<p class="ic_text">
Champion and our independent retailers and builders are committed to making your new home buying experience enjoyable and as stress free as possible. <br><br>
<a href="/where-to-buy/home-buying-guide">Learn more about the homebuying process >></a>
</p>
</div>
</div>
</div>
<div style="clear: both;"></div>
<hr />
<h2 style="color: #0092b8">Manufactured, Modular and Mobile Home Manufacturers </h2>
<p>Champion Home Builders, a lead manufacturer of manufactured, mobile and modular homes, provides a wide variety of factory-built solutions- from single-family and multi-family modular homes, to commercial and government buildings. Our mobile, modular and manufactured homes are distributed through a large network of communities, retailers and builders. As a result, you’ll find Champion-built structures in rural neighborhoods, urban districts and everywhere in between. </p>
<p>Explore our site to learn more about all of our modular, manufactured and mobile home options including: Manufactured and Mobile Homes, Modular Homes, Single-Family Modular Homes, and Multi-Family Modular Homes. Visit Our Commercial Modular Site to learn more about our modular construction process. </p>
<hr />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script src="jquery.capSlide.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#capslide_img_cont").capslide({
caption_color : '#fff',
caption_bgcolor : '#bd2736',
overlay_bgcolor : '#bd2736',
border : '',
showcaption : true
});
$("#capslide_img_cont2").capslide({
caption_color : '#fff',
caption_bgcolor : '#bd2736',
overlay_bgcolor : '#bd2736',
border : '',
showcaption : true
});
$("#capslide_img_cont3").capslide({
caption_color : '#fff',
caption_bgcolor : '#bd2736',
overlay_bgcolor : '#bd2736',
border : '',
showcaption : true
});
$("#capslide_img_cont4").capslide({
caption_color : '#fff',
caption_bgcolor : '#bd2736',
overlay_bgcolor : '#bd2736',
border : '',
showcaption : true
});
$("#capslide_img_cont5").capslide({
caption_color : '#fff',
caption_bgcolor : '#bd2736',
overlay_bgcolor : '#bd2736',
border : '',
showcaption : true
});
$("#capslide_img_cont6").capslide({
caption_color : '#fff',
caption_bgcolor : '#bd2736',
overlay_bgcolor : '#bd2736',
border : '',
showcaption : true
});
});
</script>
</body>
这是 Javascript:
(function($) {
$.fn.capslide = function(options) {
var opts = $.extend({}, $.fn.capslide.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
if(!o.showcaption) $this.find('.ic_caption').css('display','none');
else $this.find('.ic_text').css('display','none');
var _img = $this.find('img:first');
var w = _img.css('width');
var h = _img.css('height');
$('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});
$('.overlay',$this).css('background-color',o.overlay_bgcolor);
$this.css({'width':w , 'height':h, 'border':o.border});
$this.hover(
function () {
if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
$('.overlay',$(this)).show();
else
$('.overlay',$(this)).fadeIn();
if(!o.showcaption)
$(this).find('.ic_caption').slideDown(500);
else
$('.ic_text',$(this)).slideDown(500);
},
function () {
if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
$('.overlay',$(this)).hide();
else
$('.overlay',$(this)).fadeOut();
if(!o.showcaption)
$(this).find('.ic_caption').slideUp(200);
else
$('.ic_text',$(this)).slideUp(200);
}
);
});
};
$.fn.capslide.defaults = {
caption_color : 'white',
caption_bgcolor : 'black',
overlay_bgcolor : 'blue',
border : '1px solid #fff',
showcaption : true
};
})(jQuery);
这是 CSS:
<style>
.demo{
float:left;
}
.sixpack{
margin-top: 25px;
}
.ic_container{
vertical-align:baseline;
margin-bottom:20px;
position:relative;
/*-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-box-shadow: 0 1px 3px #888;
-webkit-box-shadow: 0 1px 3px #888;*/
}
.overlay{
opacity:0.3;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.ic_caption{
position:absolute;
overflow:hidden;
margin:0px;
padding:5px 0px 0px 0px;
left:0px;
right:0px;
cursor:default;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.ic_category{
text-transform:uppercase;
font-size:11px;
letter-spacing:3px;
padding:5px;
margin:0px;
}
.ic_caption h3{
padding:0px 5px 5px 5px;
margin:0px;
font-size:18px;
}
.ic_text{
padding:5px;
margin:0px;
text-align:justify;
font-size:11px;
}
最佳答案
它在我的 chrome 中运行良好，我认为您必须更新 chrome 或在 chrome 浏览器中启用 javascript。
关于javascript - Jquery 插件在 Chrome 中不工作 - jCapSLide，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22872528/