Спонсор поста:Как быстро продать квартиру в
Москве со скидкой.

Источник.

Пример.

Я могу решить эту проблему в пять строк!

<img src="img/logo.gif" alt="Detached Designs" id="image">
<a href="#" id="scroll">Scroll</a>

Это наш пример html. Тут просто картинка и тег-якорь. Теперь перейдем к jQuery.

$(document).ready(function()
 {
  $("#scroll").click(function()
 {
 var theLeftAmount = $("#image").css("left");
 var theNumber = parseFloat(theLeftAmount, 10);
 theNumber += 25;
 var amountToShift = theNumber + "px";
 $("#image").css("left", amountToShift); });
 });

Теперь разберем код.

$(document).ready(function()
 {
  $("#scroll").click(function()

Когда документ готов, мы находим тег с id=”scroll” и вызываем функцию, когда по нему кликают.

var theLeftAmount = $("#image").css("left");
var theNumber = parseFloat(theLeftAmount, 10);
theNumber += 25;
var amountToShift = theNumber + "px";

Здесь мы делаем несколько переменных. Чтобы сдвинуть картинку, мы будем менять свойство “left” в CSS. Переменная “theLeftAmount” будет хранить текущее значение. Если в CSS задано “20px”, “theLeftAmount” будет эквивалентно “20px”.

Переменная “theNumber” хранит число без “px” в конце.

Следующим шагом мы добавим к номеру 25px. Мы создаем новую переменную “amountToShift” и помещаем значение, эквивалентное нашему “theNumber” плюс еденицу измерения “px”.

$("#image").css("left", amountToShift); });

Наконец мы меняем свойство нашей картинки на новое значение (amountToShift).

Обратите внимание, что все примеры, использующие css, добавляют стили непосредственно в документ. Я делаю это, чтобы было проще. В идеале Вы хотели бы добавлять стили напрямую и затем ссылаться на них, используя “addClass”.

Популярность: 54%