Полезное, отличный онлайн учебник JavaScript с примерами #
Доступным и понятным языком рассказывается и даже показывается в этом учебнике о JS. Очень качественная выкладка материала, советую.
http://learn.javascript.ru/ Динамическая замена title на JavaScript и Jquery #
Единственный более менее нормальный способ менять заголовок на лету, остальные не работали в разных браузерах.
var data = $('h1').html() + '| Умный заголовок';
document.title = data.replace( /([\s\S]+)<title>/, '' ).replace(/<\/title>([\s\S]+)/, '' );
Скрипт находит в документе текст между тегом
<h1> </h1>
, после чего он помещается между тегами
<title> </title>
с добавлением текста "| Умный заголовок". Аминь.
Полный ресайз бекграунда с плавной заменой изображения #
Помните пост
Полный ресайз бекграунда не зависимо от размеров окна браузераСегодня сделаем так что бы бекграунд еще и с эффектом затухания слайдилась
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 секунд смена бекграунда)
БАЛУН111! #
JS<script type="text/javascript">
<!--
var cur_balloon = '';
var isvis = false;
function Balloon_Off(){
if(isvis){ isvis = false; return; }
var Balloon = cur_balloon ? document.getElementById(cur_balloon) : '';
if (Balloon) { Balloon.style.display = 'none'; document.onclick = null; cur_balloon = ''; }
}
function Balloon_On(bid){
Balloon_Off();
var Balloon = document.getElementById(bid);
if (!Balloon) return;
cur_balloon = bid;
Balloon.style.display = '';
isvis = true;
document.onclick = Balloon_Off;
Balloon.onclick = new Function("isvis=true");
return false;
}
//-->
</script>
CSS<style>
a {position:absolute; top:30%; left:50%; margin-left:-100px; display:block; text-decoration:none; border-bottom:1px dashed; font-size:16px;}
a:hover {border-bottom:0px;}
#Form {width:200px; height:300px; background:#eee; border:1px solid #B7B7B5; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius: 15px; text-align:center; padding-top:40px;}
</style>
HTML<a href="#" onclick="return Balloon_On('Form')">Жмякнуть в эту штуку</a>
<div id="Form" style="display:none; position:absolute; top:20%; left:70%; margin-left:-100px;">А здесь блок</div>
Smart корзина JavaScript jQuery #
ДЕМО /
Оф. сайт там же и скачать _http://tech-laboratory.blogspot.com/2009/10/smart-cart-javascript-jquery-pluging.html