Скрипты для сайта

Скрипты для сайта

Главная | Регистрация | Вход

Приветствую Вас Гость | RSS

Меню сайта

Теги HTML

Терминология языка HTML
Теги HTML по алфавиту
Теги HTML по типу
Уроки HTML начинающим

CSS

Введение в стили CSS
Параметры шрифта и фона
Отображения текста
Отступы,рамки и выделение
Параметры абзацев,списков
Параметры таблиц
Специальные селекторы

Реклама

Все для сайта

Все для графики
Меню и навигация
Слайдеры и слайдшоу
Кнопки и иконки
Tooltips
Аудио и видео плееры
Формы и таблицы

Перетаскивание фотографий по столу. (Мини)


Перетаскивание фотографий по столу JAVASCRIPT <script type="text/javascript" src="http://samouchka-html.ucoz.ru/SCRIPT/1.4.2.js"></script> <script type="text/javascript" src="http://samouchka-html.ucoz.ru/SCRIPT/1.8.2.js"></script> Основной код CSS <style type="text/css"> /* The page body / html, body { background: #333; overflow: hidden; font-family: Helvetica, Arial, sans-serif; } / The div holding the wooden table img tag / #wooden-table { position: absolute; left: -5000px; } / The light table itself / #lighttable { position: relative; width: 600px; height: 350px; background: #eee url(../image/wooden-table.jpg); padding: 70px; margin: 0 auto; border: 10px solid #111; display: none; } / Photos on the light table / #lighttable img { border: 10px solid #fff; box-shadow: 0 0 1em rgba(0, 0, 0, 0.9); -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.9); -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.9); position: absolute; left: -9999px; top: -9999px; } </style> JQUERY код:* <script type="text/javascript"> var newImageZIndex = 1; // To make sure newly-loaded images land on top of images on the table var loaded = false; // Used to prevent initPhotos() running twice // When the document is ready, fire up the table! $( init ); // When the wooden table image has loaded, start bringing in the photos function init() { var woodenTable = $('#wooden-table img'); woodenTable.load( initPhotos ); // Hack for browsers that don't fire load events for cached images if ( woodenTable.get(0).complete ) $(woodenTable).trigger("load"); } // Set up each of the photos on the table function initPhotos() { // (Ensure this function doesn't run twice) if ( loaded ) return; loaded = true; // The table image has loaded, so bring in the table $('#lighttable').fadeIn('fast'); // Process each photo in turn... $('#lighttable img').each( function(index) { // Set a random position and angle for this photo var left = Math.floor( Math.random() * 450 + 100 ); var top = Math.floor( Math.random() * 100 + 100 ); var angle = Math.floor( Math.random() * 60 - 30 ); $(this).css( 'left', left+'px' ); $(this).css( 'top', top+'px' ); $(this).css( 'transform', 'rotate(' + angle + 'deg)' ); $(this).css( '-moz-transform', 'rotate(' + angle + 'deg)' ); $(this).css( '-webkit-transform', 'rotate(' + angle + 'deg)' ); $(this).css( '-o-transform', 'rotate(' + angle + 'deg)' ); // Make the photo draggable $(this).draggable( { containment: 'parent', stack: '#lighttable img', cursor: 'pointer' } ); // Hide the photo for now, in case it hasn't finished loading $(this).hide(); // When the photo image has loaded... $(this).load( function() { // (Ensure this function doesn't run twice) if ( $(this).data('loaded') ) return; $(this).data('loaded', true); // Record the photo's true dimensions var imgWidth = $(this).width(); var imgHeight = $(this).height(); // Make the photo bigger, so it looks like it's high above the table $(this).css( 'width', imgWidth * 1.5 ); $(this).css( 'height', imgHeight * 1.5 ); // Make it completely transparent, ready for fading in $(this).css( 'opacity', 0 ); // Make sure its z-index is higher than the photos already on the table $(this).css( 'z-index', newImageZIndex++ ); // Gradually reduce the photo's dimensions to normal, fading it in as we go $(this).animate( { width: imgWidth, height: imgHeight, opacity: .95 }, 1200 ); } ); // Hack for browsers that don't fire load events for cached images if ( this.complete ) $(this).trigger("load"); }); } </script> Листинг <div id="wooden-table"> <img src="../image/wooden-table.jpg" alt="Изображение деревянного стола"></div> <div id="lighttable"> <img src="../image/foto_1.jpg" alt="Bird Marking" style="left: 106px; top: 82.5px; -o-transform: rotate(-14deg); z-index: 4; display: block; width: 165px; height: 96.5px; opacity: 0.95" class="ui-draggable"> <img src="../image/foto_2.jpg" alt="Double Propellors" style="left: 106px; top: 82.5px; -o-transform: rotate(-14deg); z-index: 4; display: block; width: 195px; height: 126.5px; opacity: 125" class="ui-draggable"> <img src="../image/foto_3.jpg" alt="Moody Listener Satellite Dish" style="left: 106px; top: 82.5px; -o-transform: rotate(-14deg); z-index: 4; display: block; width: 195px; height: 126.5px; opacity: 125" class="ui-draggable"> <img src="../image/foto_4.jpg" alt="Orange Hatches" style="left: 106px; top: 82.5px; -o-transform: rotate(-14deg); z-index: 4; display: block; width: 195px; height: 126.5px; opacity: 125" class="ui-draggable"> <img src="../image/foto_5.jpg" alt="Plane Nose Closeup" style="left: 106px; top: 82.5px; -o-transform: rotate(-14deg); z-index: 4; display: block; width: 195px; height: 126.5px; opacity: 125" class="ui-draggable"> </div> Предпросмотр Скачать

Заработай сейчас!

Заработай сейчас

Навигация по сайту

Поиск по сайту

Друзья сайта

Самоучитель html
Все для веб-мастера
Музыка для души
Мир развлечений
Скачать кино бесплатно!
Видеоклипы online

Хостинг от uCoz

Avon

Присоединяйтесь
к Avon