veselov.sumy.ua > CSS, JavaScript > Ïîëíûé ðåñàéç áåêãðàóíäà ñ ïëàâíîé çàìåíîé èçîáðàæåíèÿ
Ïîëíûé ðåñàéç áåêãðàóíäà ñ ïëàâíîé çàìåíîé èçîáðàæåíèÿ21.01.11. |
Ïîìíèòå ïîñò Ïîëíûé ðåñàéç áåêãðàóíäà íå çàâèñèìî îò ðàçìåðîâ îêíà áðàóçåðà
![]() Ñåãîäíÿ ñäåëàåì òàê ÷òî áû áåêãðàóíä åùå è ñ ýôôåêòîì çàòóõàíèÿ ñëàéäèëàñü
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 ñåêóíä ñìåíà áåêãðàóíäà) Âåðíóòüñÿ íàçàä |