Спонсор поста:Как быстро продать квартиру в
Москве со скидкой.
Я могу решить эту проблему в пять строк!
<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”.
Популярность: 17%
ROM
RSS Записей
Поддержи сайт!

