Желание иметь фон, который изменяет / масштабирует / растягивает с окном браузера.
Хотя, кажется, есть метод CSS3, он не поддерживается широко.Кажется, существует множество методов JQuery - но все они вроде ... ну, кажутся немного неуклюжими или требуют слишком много ручного ввода.
Итак ... я думал ... как насчет чего-то, что выбираетосновы и делает ли это большинство для нас?
Ниже я получил то, что я получил до сих пор:
Он основан на некоторых существующих методах, таких как Fullscreenr, с некоторыми изменениями.
<script type="text/javascript">
//<![CDATA[
$.fn.fullscreenr = function(options) {
var defaults = { width: 1280, height: 1024, bgID: 'bgimg' };
var options = $.extend({}, defaults, options);
$(document).ready(function() {
$(options.bgID).fullscreenrResizer(options);
});
$(window).bind("resize", function() {
$(options.bgID).fullscreenrResizer(options);
});
return this;
};
$.fn.fullscreenrResizer = function(options) {
// Set bg size
var ratio = options.height / options.width;
// Get browser window size
var browserwidth = $(window).width();
var browserheight = $(window).height();
// Scale the image
if ((browserheight/browserwidth) > ratio){
$(this).height(browserheight);
$(this).width(browserheight / ratio);
} else {
$(this).width(browserwidth);
$(this).height(browserwidth * ratio);
}
// Center the image
$(this).css('left', (browserwidth - $(this).width())/2);
$(this).css('top', (browserheight - $(this).height())/2);
return this;
};
$(document).ready(function() {
// Get the URL based on the Background property
function extractUrl(input) {
return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
}
// Get the Background CSS Property.
imageURL = extractUrl($("body").css("background-image"));
$('body').prepend('<div id="triquiback"></div');
$('#triquiback').prepend('<img id="triquibackimg" src="'+imageURL+'" />');
var triquibackcss = {
'left' : '0',
'top' : '0',
'position' : 'fixed',
'overflow' : 'hidden',
'zIndex' : '-9999'
};
var triquibackimgcss = {
'position' : 'fixed'
};
$("#triquiback").css(triquibackcss);
$("#triquibackimg").css(triquibackimgcss);
});
$(window).load(function() {
var pic = $('img');
pic.removeAttr("width");
pic.removeAttr("height");
thiswidth = pic.width();
thisheight = pic.height();
// You need to specify the size of your background image here
// (could be done automatically by some PHP code)
var FullscreenrOptions = {
width : thiswidth,
height : thisheight,
bgID : 'img'
};
// This will activate the full screen background!
jQuery.fn.fullscreenr(FullscreenrOptions);
});
//]]>
</script>
Итак ... с какими изменениями я справился?
Ну, мне удалось сделать так, чтобы выНе нужно указывать фоновое изображение / файл, он автоматически выбирает его из тела.
Мне также удалось сделать так, чтобы он мог самостоятельно определять высоту / ширину.
Далее - я сделал так, чтобы обертка и изображение, которое нужно изменить, вставлялось через JQuery, а не включалось в разметку, и чтобы оно также стилизовалось через JS.
Сейчас... проблемы / желания?
ну - для начала - это все в мав html doc.
Мне бы хотелось, чтобы он был внешним файлом, но все, что я пробовал, не удалось!Вероятно, из-за хакджоба, сделанного на нем.
После этого - возможно ли сделать это, чтобы мы могли указать элемент, к которому он будет применяться (на случай, если мы хотим что-то отличное от body)?
Вообще-то - это похоже на беспорядок (из-за неправильного использования хакджоба), и я уверен, что он чертовски неэффективен / неопрятен.Есть ли лучший способ сделать код?
Я не уверен на 100%, но, возможно, свойство z-index должно быть настраиваемым!как я полагаю, возможно, что в какой-то момент кто-то может иметь другую настройку и желать другое значение?
(Включить значение по умолчанию, если ни один не указан?)
IE6 ... Я думаюЯ пропустил, как заставить CSS работать для IE6, возможно ли идентифицировать браузер и предоставлять различные стили, если это IE6?
Все это, кроме этого, кажется, работает достаточно хорошо.Изменение размера при изменении размера окна, работает в FF3 / последней версии Chrome (6?), IE7 и т. Д.
Я видел небольшую хитрость для проверки, поддерживается ли CSS3 или нет, поэтому я также проверю, чтобы увидеть,Я могу использовать его, чтобы определить, требуется ли это или нет (следует сохранить кое-что, если не требуется).
+
Я чувствую себя настолько дерзко, прося о помощи ...
Я привык делать подобные вещи сам, но, кажется, глупо тратить целый день на то, чтобы заниматься чем-то, когда есть умные / лучшие люди, которые могут помочь распознать общие проблемы и спасти меня от переворота в тот день.в неделю тянет волосы: D
Так что заранее (если мне повезет) Спасибо.