VESELOV.SUMY.UA

Полный ресайз бекграунда с плавной заменой изображения

---

Помните пост Полный ресайз бекграунда не зависимо от размеров окна браузера

Сегодня сделаем так что бы бекграунд еще и с эффектом затухания слайдилась

function backgroundScale()
{
    var imageRatio       = 1.75;
    var windowHeight     = document.body.clientHeight;
    var windowWidth      = document.body.clientWidth;
    var windowScale      = windowWidth / windowHeight;
    var targetWidth      = windowHeight * imageRatio;
    var targetWidthFull  = windowWidth;
    var leftPos          = - (targetWidth - windowWidth) / 2;
    var leftPosFull      = 0;

    if (windowScale <= imageRatio)
    {
        $('#rotator img').attr("width", targetWidth);
        $('#rotator').css("left", leftPos);
    } 
    else
    {
        $('#rotator img').attr("width", targetWidthFull);
        $('#rotator').css("left", leftPosFull);
    }
}

$(window).resize(function()
{
    var imageRatio       = 1.75;
    var windowHeight     = document.body.clientHeight;
    var windowWidth      = document.body.clientWidth;
    var windowScale      = windowWidth / windowHeight;
    var targetWidth      = windowHeight * imageRatio;
    var targetWidthFull  = windowWidth;
    var leftPos          = - (targetWidth - windowWidth) / 2;
    var leftPosFull      = 0;

    if (windowScale <= imageRatio)
    {
        $('#rotator img').attr("width", targetWidth);
        $('#rotator').css("left", leftPos);
    } 
    else 
    {
        $('#rotator img').attr("width", targetWidthFull);
        $('#rotator').css("left", leftPosFull);
    }
    mainBaseResize();
});

$(document).ready(function(){
    //$('body').css({background: #fff});
    backgroundScale(); 
    theRotator();
});

А теперь в скрипт добавляем эти функции

function theRotator() {
    $('#rotator img').css({opacity: 0.0});
    $('#rotator img:first').css({opacity: 1.0});
    setInterval('rotate()',7000);
}
 
function rotate() {    
    // Берем первую картинку
    var current = ($('#rotator img.show')?  $('#rotator img.show') : $('#rotator img:first'));
 
    // Берем следующую картинку, когда дойдем до последней начинаем с начала
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#rotator img:first') :current.next()) : $('#rotator img:first'));    
    // Рандом
    var sibs = current.siblings();
    var rndNum = Math.floor(Math.random() * sibs.length );
    var next = $( sibs[ rndNum ] );
     // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);
 
    // Прячем текущую картинку
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
};

СМОТРЕТЬ РЕЗУЛЬТАТ (Каждые 7 секунд смена бекграунда)

Видоизменяем select почти стандартными средствами

---

И так, оказывается если для стандартного select-а установить прозрачность, то он станет прозрачным, а вот сам список остается непрозрачным, занимательное и довольно полезное поведение.

css примера:

<style type=”text/css”>
.selectWrap select{
position:absolute;
margin:-2px 0px 0px -5px;
font-family:Tahoma, sans-serif;
font-size:16px;
opacity:.5;
}
.selectWrap .link{
font-size:16px;
color:#0066cc;
border-bottom:1px dotted;
}
</style>

html примера:

<div class="selectWrap">
<select> 
<option>Москва</option> 
<option>...</option>
</select>
<span class="link">Москва</span>
</div>

Решение работающее и в IE6 :-) Но к сожалению при использовании его не получится стилизовать как захочется текст :-(

<select size=1 style=«position:absolute; width:100px; clip:rect(2px 82px 20px 2px); color:blue; top:10px;»>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>