и результат не тот:
http://46.17.45.45/~knica119/index.html |
Ahterknica,
Вариант с сохранением пропорций плюс центровка картинки ... что хотите вы я смутно представляю и задание и само решение.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
p {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
height: 50px;
width: 300px;
color: #FFFFFF;
font-size: 2em;
}
* html p {
position: absolute;
}
</style>
<script type="text/javascript">
var i , t,
b;
var speed = 1500
var Pic = ['http://imgs.su/tmp/1292024913.jpg',
'http://gallery.ykt.ru/galleries/tf2/2012/06/1077057_0.jpg',
'http://www.wallgrad.ru/_ph/39/251576366.jpg',
'http://yawall.ru/images/Abstrakciya-oboi-dlya-rabochego-stola-izobrajeniya/1920x1080/50459-Golubovatiy-fon-s-beloy-izognctoy-liniey-1920x1080.jpg']
var j = 0
var p = Pic.length
for (i = 0; i < p; i++){
var preLoad = new Image()
preLoad.src = Pic[i]
Pic[i] = preLoad
}
function get(a) {
var c = document,
d = c.body,
e = c.documentElement,
f = "client" + a;
a = "scroll" + a;
return c.compatMode === "CSS1Compat" ? Math.max(e[f], e[a]) : Math.max(d[f], d[a])
}
window.onload = fon;
i = new Image;
function fon() {
window.clearTimeout(t);
j++
j %= p
i.src = Pic[j].src;
i.style.position = "absolute";
i.style.top = "0px";
var width = Pic[j].width,
height = Pic[j].height;
var r = width/height;
width = get("Width");
height = get("Height");
i.style.width = Math.min(width, height*r) + "px";
i.style.height = Math.min(height, width/r) + "px";
i.style.left = (width-Math.min(width, height*r))/2+"px";
i.style.top = (height-Math.min(height, width/r))/2+"px";;
i.style.zIndex = -999;
i.id="img"
document.body.appendChild(i)
t = setTimeout(fon, speed)
}
window.onresize = function () {
var i = document.getElementById("img");
if(i) document.body.removeChild(i);
window.clearTimeout(b);
b = window.setTimeout(function () {
fon()
}, 20)
};
</script>
</head>
<body>
<p>Всякая всячина</p>
</body>
</html>
|
ну нет.
это не годно) нужно, чтобы картинка полностью заполняла экран. Чтобы не было белых краев, полосок и рамок. |
Наверно я совсем сдурел.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
border: none;
}
html{
height: 100%;
}
body{
min-height: 100%;
background: url(http://imgs.su/tmp/1292024913.jpg) no-repeat center;
background-size: cover;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var delay = 3000;
var duration = 2000;
var backgrounds = ['http://imgs.su/tmp/1292024913.jpg',
'http://gallery.ykt.ru/galleries/tf2/2012/06/1077057_0.jpg',
'http://www.wallgrad.ru/_ph/39/251576366.jpg',
'http://yawall.ru/images/Abstrakciya-oboi-dlya-rabochego-stola-izobrajeniya/1920x1080/50459-Golubovatiy-fon-s-beloy-izognctoy-liniey-1920x1080.jpg'];
var $background = $('<div/>').css({position: 'fixed', zIndex: -1, top: 0, left: 0, right: 0, bottom: 0});
$.each(backgrounds, function(index, item){
var $image = $('<img/>').css({position: 'absolute'}).appendTo($background);
if (index > 0) {
$image.css({opacity: 0});
}
$image.on('load', function(){
var complete = true;
$(this).data('complete', true);
$backgrounds.each(function(){
if (!$(this).data('complete')) {
complete = false;
}
});
if (complete) {
runSlideshow();
}
}).prop('src', item);
})
var $backgrounds = $background.children();
function runSlideshow() {
$('body').css({background: 'none'}).append($background);
setInterval(changeBackground, delay);
changeBackground();
$(window).resize(updateDimensions);
updateDimensions();
}
function updateDimensions() {
var viewWidth = $background.width();
var viewHeight = $background.height();
$backgrounds.each(function(){
var widthDifference = viewWidth - this.offsetWidth;
var heightDifference = viewHeight - this.offsetHeight;
if (widthDifference > heightDifference) {
this.style.width = '100%';
this.style.height = '';
heightDifference = viewHeight - this.offsetHeight;
this.style.top = heightDifference < 0 ? heightDifference / 2 + 'px' : '';
this.style.left = '';
} else {
this.style.width = '';
this.style.height = '100%';
widthDifference = viewWidth - this.offsetWidth;
this.style.top = '';
this.style.left = widthDifference < 0 ? widthDifference / 2 + 'px' : '';
}
});
}
function changeBackground() {
var index = $background.data('index');
$backgrounds.eq(index).animate({opacity: 0}, duration);
index = (index < $backgrounds.length - 1) ? index + 1 : 0;
$backgrounds.eq(index).animate({opacity: 1}, duration);
$background.data('index', index);
}
</script>
</body>
</html>
Фоллбэк на css, предзагрузка изображений (правда ждется загрузка всех картинок, а не по очереди), плавные переходы, центровка обрезаемых изображений. Ну конечно грех было не воспользоваться jQuery. Поставьте delay побольше - чтоб не напрягало сильно мелькание фона. |
danik.js, вы - мой герой.)
|
эх.. и это не идеал.
в ноутбуках справа остается белая полоска |
Кстати фон к body неправильно указан. Не
background: 'image/img_1.jpg'; а
background: url('image/img_1.jpg');
И у вас четыре div#menu. Идентификаторы должны быть разные. Не знаю - изменял по-всякому размеры окна, но полос не увидел. |
background: url('image/img_1.jpg') no-repeat center;
|
| Часовой пояс GMT +3, время: 13:30. |