gpt4 book ai didi

javascript - 使 Jquery 图像标题和图像响应

转载 作者:行者123 更新时间:2023-11-28 12:16:08 25 4
gpt4 key购买 nike

我下载并应用了这个在悬停时向上滑动的 jQuery 图片说明,但是我的图片不再有响应,我不知道为什么...

我的 CSS 将图像的最大宽度设置为 100%,但我相信 JS 在某处覆盖了它。

http://www.jimharrison.co.uk/

我确实创建了一个 jsfiddle,但无法让它工作,所以使用它可能有点毫无意义 - 虽然所有的 JS 都在那里,所以如果你看看它,你可能会明白为什么我的图像没有响应.

http://jsfiddle.net/p3Zm3/

代码:

<div class="ic_container capslide_img_cont6">
<img src="img/1.jpg" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<p class="ic_category">Category</p>
<h3 class="intro">Gallery</h3>
<p class="ic_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="ic_text"><a href="www.philips.co.uk" class="learn-more">Learn More</a>
</p>
</div>
</div>
<script type="text/javascript">
$(function() {
$(".capslide_img_cont6").capslide({
caption_color : 'black',
caption_bgcolor : 'rgba(255,255,255, 0.6)',
overlay_bgcolor : 'rgba(255,255,255, 0.3)',
border : '0px solid #ccc',
showcaption : true
});
});
</script>

CSS:

 /* image rule */
img {
border: 0;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
vertical-align:top;
-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.4);
-moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.4);
box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.4);
}


.ic_container {
vertical-align:baseline;;
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 {
background: rgba(255,255,255, 0.6);
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10);
}

.ic_caption {
position:absolute;
background: rgba(255,255,255, 0.6);
overflow:hidden;
margin:0px;
padding:0px;
left:0px;
right:0px;
cursor:default;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
margin-bottom: 1%;
padding-bottom: 5px;
}

.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;
margin-bottom: 5px;
text-align:left;
font-size:1em;
}

a.learn-more {
padding: 5px 10px;
margin: 15px 0px 0px 0px;
background: #062d84;
}

a.learn-more:hover {
color: #062d84;
background: #ffffff;
}

js:

(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);

编辑:

因此,在尝试自己解决问题但仍然没有成功之后,我发现不是我的图像没有响应,而是 jQuery 正在添加内联样式并为“ic_container capslide_img_cont6”设置宽度和高度类... AAAHHHHH

最佳答案

WOOOOOP 自己解决了这个问题 - 将输出更改为“width_%”和“height_%”。

关于javascript - 使 Jquery 图像标题和图像响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22301258/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com