Желание иметь фон, который изменяет размер/масштабирует/растягивается в окне браузера.JQuery - масштабируемое/изменение размера фонового изображения
Хотя, кажется, есть метод 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.
Я бы хотел, чтобы это был внешний файл, но все, что я пробовал, не удалось! Вероятно, из-за сделанного на нем взлома.
После этого - возможно ли это сделать, чтобы мы могли указать элемент, к которому он относится (в случае, если мы хотим чего-то другого, кроме тела)?
В целом - это похоже на беспорядок (из-за неправильного размытия hackjob), и я почти уверен, что он проклят неэффективно/неопрятно. Есть ли лучший способ сделать код?
Я не уверен на 100%, но, возможно, свойство z-index должно быть установлено! как я полагаю, возможно, что в какой-то момент у кого-то может быть другая установка и желание другого значения?
(Включить по умолчанию в случае, если он не указан?)
IE6 ... Я думаю, что я пропустил, как сделать CSS для IE6 работы, можно идентифицировать браузер и поставляем различные стили, если это IE6?
Все это в стороне, кажется, работает достаточно хорошо. Изменение размера на изменение размера окна, работает в FF3/последний хром (6?), IE7 и т.д.
я видел небольшой трюк для тестирования, поддерживается ли CSS3 или нет, , так что я буду также проверить, чтобы увидеть, если Я могу использовать его, чтобы определить, требуется ли это или нет (следует сохранить некоторое раздувание, если это не требуется).
+
Я чувствую себя так нахально с просьбой о помощи ...
Я привык делать такие вещи сам, но, кажется, глупо тратить целый день делать что-то, когда умнее/лучше людей, которые могут помочь выявить общие проблемы и спасти меня, превратив этот день в неделю вытягивания волос: D
Так что заранее (если мне повезет) Спасибо.
Не уверен, что если я быть дерзким ... но, "подталкивать"? У кого-нибудь есть идеи/предложения по созданию внешнего кода/как плагина и немного более гибкого. – UselesswithJS 2010-12-06 10:25:31