我最近找到了以下站点:
https://www.bookworks.org.uk/publishing?content_type[]=output_book&min_price=0
该站点使用水平布局,而不是垂直布局。阅读代码,我试图弄清楚它们如何随着浏览器高度的变化来调整图像的大小。我想有些jQuery是必需的,但是对于我一生来说,我无法将代码包住头。
谁能指出我的位置,并且指向教程的任何链接将不胜感激。
我会自己回答这个问题。我正在使用以下代码使水平布局响应:
HTML:
<div id="page">
<div id="header">
</div>
<div id="slides">
<div class="slide"><img src="image01.jpg" /></div>
<div class="slide"><img src="image02.jpg" /></div>
<div class="slide"><img src="image03.jpg" /></div>
....
<div class="slide"><img src="imageN.jpg" /></div>
</div>
<div id="footer">
</div>
</div>
CSS:
#slides {
width: 100%;
white-space: nowrap;
}
.slide {
display: inline-block;
margin-right: 20px;
vertical-align: top;
}
jQuery的:
jQuery(document).ready(function($){
var $window = $(window),
$header = $('#header'),
$footer = $('#footer');
var getHorizontalPageHeight = function () {
return $window.height() - $header.outerHeight() - $footer.outerHeight();
};
var $slides = $('#slides'),
$items = $slides.find('img, iframe');
$items.each(function () {
var $item = $(this),
width = $item.data('width') || $item.attr('width') || 1,
height = $item.data('height') || $item.attr('height') || 1;
$item.data({
height: height,
ratio: width / height
});
});
var resizer = function () {
var contentHeight = getHorizontalPageHeight(),
windowWidth = $window.width(),
windowHeight = $window.height();
$items.each(function () {
var $item = $(this),
originalHeight = $item.data('height'),
height = contentHeight > originalHeight ? originalHeight : contentHeight,
width,
ratio = $item.data('ratio');
// desktops and tablets (horizontal)
if (windowWidth > 767) {
width = height * ratio;
$item.css({
width: width,
maxWidth: 'none',
height: width / ratio
});
// smartphones (vertical)
} else {
if ($item.is('iframe')) {
$item.css({
width: '100%',
maxWidth: height * ratio
});
$item.css('height', $item.width() / ratio);
} else {
$item.css({
width: 'auto',
maxWidth: '100%',
height: 'auto'
});
}
}
});
};
$window.on('resize', resizer);
resizer();
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句