Перетягування картинки курсором миші в будь-яке місце сайту
Як працює цей скрипт? Нижче Ви бачите три зображення (картинки). Натисніть лівою кнопкою миші на будь-який з цих зображень і перемістіть в будь-яке місце на екрані монітора.
Таким же чином можна переміщати і текст. Спробуйте "потягати" напис нижче:
Перетащи цей текст!
Як практично реалізувати роботу даного скрипта на сайті? Давайте розберемося.
1. Створюємо файл таблиці стилів drag.css або якщо на Вашому сайті вже є таблиця стилів просто дописуємо в неї код лістингу 1:
Підключаємо таблицю стилів до web-сторінці. Для цього прописуємо код лістингу 2 між тегами
і :Якщо Ви додали стиль оформлення (код лістингу 1) в існуючу таблицю стилів, то цей крок пропустіть.
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 ()
>,
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)))
if (isNaN (parseInt (this.targetobj.style.top)))
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 ()
3. У тому місці web-сторінки, де Ви хочете вивести зображення, вставляємо код лістингу 5:
У мене ці графічні файли називаються: www.png. my.png і reb.png. Зверніть увагу, що графічні файли зроблені в форматі .PNG. Звичайно можна використовувати будь-який графічний формат, наприклад: .JPG або .GIF. але в даному випадку зручніше використовувати формат .PNG. так як зображенню можна задати прозорий фон (Transparency).
Якщо є необхідність застосувати ефект перетягування до текстового блоку, використовуйте код лістингу 6. Стиль оформлення тексту корегуйте на свій розсуд.
Перетащи цей текст!
Ось власне кажучи і все.
Читайте також інші наші матеріали.
Як зареєструватися в якості індивідуального підприємця (ІП)
Скрипт: Привітання в залежності від часу доби
Як зробити на сайті, що біжить Рядок
Плавне збільшення картинки при наведенні курсору
Поділіться цією інформацією зі своїми друзями!
уроки HTML
CSS уроки
статті
Інструменти
Шаблони сайтів
книги
прикраси
Сайт від А до Я
Заробити в інтернеті
Обман в Інтернеті
Охорона праці
МОДУЛЬНІ КАРТИНИ
PHP УРОКИ
послуги
скрипти
SEO
jQuery
Спеціальна оцінка умов праці (Соуто) - АРМ
Платіжні системи Інтернету
УРОКИ ФОТОШОП
секретний розділ
З нами зробити сайт
зможе навіть Дитина!
"Сайт від А до Я"
Дізнатися зараз >>>
Хочете заробити?
2-х рівнева
Партнерська програма!
Приєднуйтесь.
Модульна картина: Розкіш червоного оксамиту
Модульна картина абстракція: Енергія сонця
Модульна картина: Сині троянди
Модульна картина: Водоспад
Модульна картина: Орхідеї
Реєстрація доменів
ТОВ "ПК" ЛюксСтрой "
Якщо Вам сподобався
наш сайт, встановіть
Нашу посилання. і
Отримайте подарунки.