Jquery 插件在 Chrome 中不起作用 - jCapSLide.
Jquery Plugin not working in Chrome - jCapSLide
以下 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。
相关文章：
- electronic BrowserWindow的最小高度和宽度在hide(）show(）方法之后不起作用
- 监视函数从服务返回不起作用，但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- Meteor-添加用户自定义字段的方法不起作用
- 为什么 .focus(） 不起作用，而 .css(“color”，“red”） 在同一个选择器上起作用
- Textarea必需的attribut在javascript中不起作用
- 为什么javascript:void(0）在Firefox中不起作用
- Jquery 插件在 Chrome 中不起作用 - jCapSLide.
