JQuery - 可缩放/调整大小的背景图片
希望有一个使用浏览器窗口调整/缩放/拉伸的背景。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所做的。
接下来 - 是否可以使它成为我们可以指定要应用的元素(以防我们需要除了body之外的其他东西)?
通常 - 它看起来像一个混乱,(由于hackjob错误的混搭),我敢肯定它是该死的效率低下/不整洁。有没有更好的方法来执行代码?
我不是100%确定,但也许z-index属性应该是可设置的!因为我认为在某些时候有人可能会有不同的设置并渴望不同的价值?
(包括如果没有指定一个默认?)
IE6 ...我想我已经错过了如何针对IE6的CSS的工作,才有可能找出浏览器,如果提供不同的造型它是IE6?
所有这一切,似乎工作得很好。 调整窗口大小,在FF3 /最新铬(6?),IE7等工作
我见过一个小技巧,测试是否支持CSS3, 所以我也会测试看看是否我可以用它来检测这是否需要(如果不需要,应该节省一些膨胀)。
+
我觉得这么厚脸皮寻求帮助......
我已经习惯了做这样的事情我自己,但似乎傻浪费了一整天做的事情,当有更聪明/更好的人,可以帮助发现的常见问题和救我转弯的那一天到揪头发的一周:d
所以提前(如果我很幸运)谢谢。
对于那些来这里寻找为稳定的插件来轻松调整网页的背景图像,有一个很好的jquery插件,就是这样!
参见:jQuery Easy Background Resize
相关的OP问题:
- 支持旧的浏览器:
对IE6的市场份额今日v低。 Safari,Firefox和Opera等其他浏览器也一样。
查看更多details here!
- 裹的代码放到一个jQuery插件:
把你的代码和插件打造出来的它可以在四个基本步骤中完成:
- 跨库安全
- 创建和命名你的插件功能
- 允许chainability
- 开始构建插件功能
(1) 做的第一件事是创建一个包装功能它允许您使用$而不会与其他可能包含的JavaScript框架发生冲突:
(function($) {
// safe to use $ here and not cause conflicts
})(jQuery);
(2) 接下来,创建您的插件将驻留的函数。不管你的名字此功能将是您和其他人使用你的插件:
(function($) {
$.fn.mypluginname = function() {
// the plugin functionality goes in here
}
})(jQuery);
(3) 在这一点上,请记住,因为jQuery采取任何选择,你可以处理一个或多个对象。这意味着你需要确保你的插件遍历由选择匹配的每一个元素,并应用插件功能:
(function($) {
$.fn.mypluginname = function() {
return this.each(function() {
// apply plugin functionality to each element
});
}
})(jQuery);
(4) 在这个阶段,你开始建立你的插件功能!在你的情况下,背景调整的所有必要步骤。
最终的结果将是沿着这条线的东西:
$('div').mypluginname();
这里有一个很好的教程,以帮助您完成整个过程,甚至增加配置选项,你所提到的!
不知道我是不是很厚脸皮......但是,“轻推”? 任何人都有任何想法/建议,使代码外部/作为一个插件,更灵活一点。 – UselesswithJS 2010-12-06 10:25:31