[英]Remove height value from Javascript
I have created a responsive site and then used some JS code to create captions on the images which works fine but when I re-size the browser. 我创建了一个响应站点,然后使用一些JS代码在图像上创建了标题,效果很好,但是当我调整浏览器的大小时。 The images don't scale like they should and I believe its due to being given a height value in the JS. 图片无法按比例缩放,我相信这是由于JS中的高度值所致。 How do I remove this value and make the caption work? 如何删除该值并使字幕正常工作?
$(window).load(function(){
// For each instance of p.caption
$("p.caption").each(function(){
$(this)
// Add the following CSS properties and values
.css({
// Height equal to the height of the image
"height" : $(this).children("img").height() + "px",
// Width equal to the width of the image
"width" : $(this).children("img").width() + "px"
})
// Select the child "span" of this p.caption
// Add the following CSS properties and values
.children("span").css(
// Width equal to p.caption
// But subtract 20px to callibrate for the padding
"width", $(this).width() - 20 + "px")
// find the <big> tag if it exists
// And then add the following div to break the line
.find("big").after('<div class="clear"></div>');
// When you hover over p.caption
$("p.caption").hover(function(){
// Fade in the child "span"
$(this).children("span").stop().fadeTo(400, 1);
}, function(){
// Once you mouse off, fade it out
$(this).children("span").stop().delay(600).fadeOut(400);
});
// End $(this)
});
});
I think you should try window.resize. 我认为您应该尝试window.resize。
$(window).resize(function() {
$("p.caption").each(function() {
var item = $(this);
var big = item.find("big");
item.css({
"height" : item.children("img").height() + "px",
"width" : item.children("img").width() + "px"
}).children("span").css("width", item.width() - 20 + "px");
});
});
I refactored your code and created a fiddle: 我重构了您的代码并创建了一个小提琴:
http://jsfiddle.net/VinnyFonseca/6Kv9U/1/ http://jsfiddle.net/VinnyFonseca/6Kv9U/1/
jQuery.resize()
will solve this for you http://api.jquery.com/resize/ jQuery.resize()
将为您解决这个问题http://api.jquery.com/resize/
You just have to store that procedural code to be re-executable (function) and then retrigger it based on relative (parent) DOM dimensions. 您只需要存储该过程代码即可重新执行(功能),然后根据相对(父)DOM维度重新触发它即可。
'use strict';
removeHeight(){
// That code here
}
$(document).ready(function(){
// Initial removal
removeHeight();
// Removal when resizing
$(window).resize(function() { removeHeight() });
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.