如何解决随机图像自动重缩放
| 我目前正在使用http://photomatt.net/scripts/randomimage显示随机背景图像。我想让这些图像根据窗口或div宽度自动重新缩放(动态吗?)。这有可能吗?如果您有时间和能力,代码将是不可思议的。 :) 提前致谢! 为方便起见,以下是当前的随机图片代码:<?PHP
// Make this the relative path to the images,like \"../img\" or \"random/images/\".
// If the images are in the same directory,leave it blank.
$folder = \'\';
// Space seperated list of extensions,you probably won\'t have to change this.
$exts = \'jpg jpeg png gif\';
$files = array(); $i = -1; // Initialize some variables
if (\'\' == $folder) $folder = \'./\';
$handle = opendir($folder);
$exts = explode(\' \',$exts);
while (false !== ($file = readdir($handle))) {
foreach($exts as $ext) { // for each extension check the extension
if (preg_match(\'/\\.\'.$ext.\'$/i\',$file,$test)) { // faster than ereg,case insensitive
$files[] = $file; // it\'s good
++$i;
}
}
}
closedir($handle); // We\'re not using it anymore
mt_srand((double) microtime()*1000000); // seed for PHP < 4.2
$rand = mt_rand(0,$i); // $i was incremented as we went along
header(\'Location: \'.$folder.$files[$rand]); // Voila!
解决方法
好吧,我可能会采用JavaScript方法。
在隐藏的图像元素中将图像加载到幕后。
绑定到图像元素的onload事件,以便知道它何时完成。
加载图像后获取图像的宽度/高度,并使用该宽度/高度应用CSS / etc。根据浏览器的外观,图像大小等来选择页面
伪代码:
var body = document.getElementsByTagName(\'body\')[0];
var img = document.createElement(\'img\');
img.src = \'random_image.php\';
img.style.display = \'none\';
img.onload = function(){
// modify the background styles based on your own conditions
};
body.appendChild(img);
如果您真的想花哨的话,可以绑定到窗口调整大小事件,然后继续根据可见屏幕大小,浏览器窗口大小等来更改随机图像。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。