Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Перетаскивание картинки курсором мыши в любое место сайта.

Автор: Андрей Краснокутский

Дата: 2012-03-02

JavaScript, создающий эффект перетаскивания изображений.

В этом уроке мы рассмотрим работу скрипта JavaScript для сайта, создающего эффект перетаскивания изображений или надписей (текста).

Как работает данный скрипт? Ниже Вы видите три изображения (картинки). Нажмите левой кнопкой мыши на любое из этих изображений и переместите в любое место на экране монитора.

Таким же образом можно перемещать и текст. Попробуйте "потаскать" надпись ниже:

Перетащи этот текст!

Как практически реализовать работу данного скрипта на сайте? Давайте разберемся.

1. Создаём файл таблицы стилей drag.css или если на Вашем сайте уже есть таблица стилей просто дописываем в нее код Листинга 1:

Листинг 1.

.drag { position:relative; cursor:hand; z-index: 100; }

Подключаем таблицу стилей к web-странице. Для этого прописываем код Листинга 2 между тегами <head> и </head>:

Листинг 2.

<link rel="stylesheet" href="ПУТЬ К ФАЙЛУ/drag.css" type="text/css" />

Если Вы добавили стиль оформления (код Листинга 1) в существующую таблицу стилей, то этот шаг пропустите.

 

2. Создаем сам скрипт drag.js написанный на языке JavaScript. Для этого создаем обычный текстовый документ с расширение .txt , переименовываем его в drag.js , и размещаем в этом файле код Листинга 3:

Листинг 3.

var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()

 

Подключаем JavaScript к web-странице. Для этого прописываем код Листинга 4 между тегами <head> и </head>:

Листинг 4.

<script language="JavaScript" type="text/javascript" src="ПУТЬ К ФАЙЛУ/drag.js"></script>

 

3. В том месте web-страницы, где Вы хотите вывести изображения, вставляем код Листинга 5:

Листинг 5.

<img src="ПУТЬ К ФАЙЛУ/www.png" class="drag">
<img src="ПУТЬ К ФАЙЛУ/my.png" class="drag">
<img src="ПУТЬ К ФАЙЛУ/reb.png" class="drag">

У меня эти графические файлы называются: www.png, my.png и reb.png. Обратите внимание, что графические файлы сделаны в формате .PNG. Конечно можно использовать любой графический формат, например: .JPG или .GIF , но в данном случае удобнее использовать формат .PNG, так как изображению можно задать прозрачный фон (Transparency).

Если есть необходимость применить эффект перетаскивания к текстовому блоку, используйте код Листинга 6. Стиль оформления текста корректируйте на свое усмотрение.

Листинг 6.

<p style="font-family: Times New Roman; font-size:25px;" align="center"><strong class="drag">Перетащи этот текст!</strong></p>

Вот собственно говоря и все.

Скачать исходник к уроку.

Всего Вам доброго.

 

Читайте так же другие наши материалы.

Как зарегистрироваться в качестве индивидуального предпринимателя (ИП)

Скрипт: Приветствие в зависимости от времени суток

Как сделать на сайте Бегущую Строку

Плавное увеличение картинки при наведении курсора

Контекстная реклама Google AdSense. Практическое руководство.

 

Просмотров: 10948


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Алёна
Дата: 2012-03-02

Супер урок!!! Спасибо большое!!!

Комментарии добавил(а): Olga
Дата: 2012-03-02

Спасибо автору, КЛАСС!!!

Комментарии добавил(а): Юрий
Дата: 2012-03-02

Привет,Андрей! Эффект интересный,но в чём его суть,ведь после обновления страницы всё возвращается на свои места.

Комментарии добавил(а): Гораций
Дата: 2012-03-04

Феноменально! Даже представить такое не мог.

Комментарии добавил(а): Лена
Дата: 2012-03-05

Очень хороший урок!

Комментарии добавил(а): Nargiz
Дата: 2012-03-09

Klassssss!

Комментарии добавил(а): Максим
Дата: 2012-03-09

Урок замечательный, а как сделать так чтобы у меня высвечивалась какая-нибудь кнопка с надписью"поставить на место" и при нажатии на эту кнопку всё вернулось на свои места

Комментарии добавил(а): Владимир
Дата: 2012-11-30

Эффект хороший, только хотелось бы знать максимальное число картинок, которые можно так передвигать

Комментарии добавил(а): АндрейК
Дата: 2012-12-03

Максимальное число картинок как то не было необходисти считать, но практически до 20 картинок таким образом передвигаются без проблем

Комментарии добавил(а): Сергей
Дата: 2013-08-08

Вот здорово побольше бы таких скриптов...

Комментарии добавил(а): Максим Батуркин
Дата: 2016-02-19

Вот спасибо. Отличный скриптяра. Без подключения всяких библиотек и прочего.

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

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


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT