Как я могу сдвинуть изображение каждый раз, когда по нему кликают?

Фото автора =) 29.07.2008 от ROM Комментариев нет »

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

Источник.

Пример.

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

<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%

Похожие посты:
  • None Found
Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: JQuery, Переводы |

32

Фото автора =) 28.07.2008 от ROM Комментариев нет »

Чем выше Вы находитесь по служебной лестнице, тем, как предполагается, больше времени Вы должны затрачивать на то, чтобы просто думать.
Патрик Форсайт “Делу - время”

Книги Патрика Форсайта:
Руководство по выживанию в компании
Маркетинг в книгоиздании
Консалтинг. Как основать консалтинговое агентство и добиться успеха
Успешные переговоры
Голая правда о… маркетинге
Мастерство продажи


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

Похожие посты:
  • None Found
Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: Фразы |

Солянка 27.07.08

Фото автора =) 26.07.2008 от ROM 1 Комментарий »

Как заметили посетители блога и, скорее всего, не заметели читатели RSS, я обновил тему. Тема оригинальная. Создана моими руками. Это моя первая попытка создания тем для wordpress, поэтому, если будут вылазаить всякие баги, сообщите мне, пожалуйста, через контактную форму в конце поста.

Тему я хотел поменять давно, т.к. хотелось уникальности. Но вот только недавно собрался и неспеша за месяц сделал. Заодно и обновил wordpress, перепрыгнув через версию. Кстати, забавно получилось: я уже подготовился к обновлению и запланировал себе, что завтра поставлю. Но на следующий день вышла версия еще новее. Пришлось подготавливаться заново =)

Поддавшись всеобщему психозу =), поставил этот блог на карту блогов.

В общем пока всё. Оставайтесь с нами! (c) =)

(обязательно)
(обязательно)

 

Читать полностью »


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

Похожие посты:
  • None Found
Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: Без рубрики |

Как сделать ссылку “Прочитать дальше”, которая развернет оставшийся текст.

Фото автора =) 22.07.2008 от ROM Комментарии (2) »

Спонсор поста: Круглые светильники из хрусталя.

Оригинал.

Пример.

Это очень легко! Давайте сделаем html пример.

<p>
 This is some text. This is some text. This is some text. This is some text. This
 is some text. This is some text. This is some text. This is some text. This is some
 text. This is some text. This is some text. <span class="readMore">Read More</span>
</p>
<p>
 This is some text. This is some text. This is some text. This is some text. This
 is some text. This is some text. This is some text. This is some text. This is some
 text. This is some text. This is some text. This is some text. This is some text.
</p>

Это только некоторый текст с двумя параграфами. Мы также имеем span с классом “readMore”. Когда по span кликнули, мы должны его убрать.

$(document).ready(function()
 {
  $('p:eq(1)').hide();
  $('span.readMore').css({"cursor" : "pointer", "color" : "blue", "font-size" : ".8em"}).click(function()
 {
  $('p:eq(1)').fadeIn("slow");
  $(this).fadeOut("normal");
});
});

$(document).ready(function()
{
$(‘p:eq(1)’).hide();
$(‘span.readMore’).css({“cursor” : “pointer”, “color” : “blue”, “font-size” : “.8em”}).click(function()
{
$(‘p:eq(1)’).fadeIn(“slow”);
$(this).fadeOut(“normal”);
});
});

Здесь мы собираемся спрятать второй параграф (p:eq(1)). Помните, что javascript использует 0 как первое число. Соответсвенно “1” будет эквивалентно второму параграфу.

$('span.readMore').css({"cursor" : "pointer", "color" : "blue", "font-size" : ".8em"}).click(function()

Следующим шагом задаем span с классом “readMore” некоторый CSS. Мы поменяем курсор на указатель для того, чтобы пользователи могли увидеть, что этот span кликабельный. Далее мы поменяем цвет, чтобы выделить, и немного уменьшим размер текста. Далее запустим функцию, когда кликнут по span.

$('p:eq(1)').fadeIn("slow");
$(this).fadeOut("normal");

Когда кликнут, мы собираемся найти второй параграф и медленно показать его. Затем “this” (span, по которому кликнули) будет “растворяться” в течении 0.4 секунды (“normal”).

Это всё, что надо сделать!


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

Похожие посты:
  • None Found
Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: JQuery, Переводы |

31

Фото автора =) 21.07.2008 от ROM Комментарии (2) »

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

Патрик Форсайт “Делу - время”

Книги Патрика Форсайта:
Руководство по выживанию в компании
Маркетинг в книгоиздании
Консалтинг. Как основать консалтинговое агентство и добиться успеха
Успешные переговоры
Голая правда о… маркетинге
Мастерство продажи


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

Похожие посты:
  • None Found
Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: Фразы |

Как увеличить картинку, когда на неё кликают

Фото автора =) 15.07.2008 от ROM Комментариев нет »

Спонсор поста: Поможем осуществить срочный выкуп квартир.

Оригинал.

Пример.

На самом деле это очень просто. Для начала сделаем короткий html.

<img src="img/logo.gif" alt="Logo" id="image">
 <p>
  Click To Zoom In
 </p>

Тут мы имеем картинку и параграф. Мы могли использовать и другой тэг вместо параграфа. Я хотел показать, как мы можем задать событие по клику для любого элемента.

$(document).ready(function()
    {
    $("#image").css("width", "100px");
        $("#image").toggle(function()
            {
                $(this).animate({width: "300px"}, 1000);
                $('p').text("Click To Zoom Out");
                
            }, function(){
                $(this).animate({width: "100px"}, 1000);
                $('p').text("Click To Zoom In");
            });
    });

Шаг за шагом:

$(document).ready(function()
    {
    $("#image").css("width", "100px");

$(document).ready(function()
{
$(“#image”).css(“width”, “100px”);

Когда документ готов, мы задаем ширину элемента с id=”image” равную 100 пикселям.

$("#image").toggle(function()
 {
  $(this).animate({width: "300px"}, 1000);
  $('p').text("Click To Zoom Out");

Когда картинку кликнули, мы запускаем метод toggle. Используя “toggle”, мы можем задать две функции. Первая будет запущена, когда картинку кликнули первый раз. Вторая - когда второй раз кликнули по картинке. Это наилучшее при использовании расширяющихся/уменьшающихся элементов.

Когда картинка кликнута первый раз, мы собираемся взять “this” (картинка, по которой кликнули) и анимировать её. Мы изменим ширину картинки до 300 точек и раздвинем её в течении секунды.

}, function(){
 $(this).animate({width: "100px"}, 1000);
$('p').text("Click To Zoom In");

Когда картинку кликнули во второй раз, мы изменяем ширину картинки назад к 100 точкам и изменяем текст параграфа.


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

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: JQuery, Переводы |

30

Фото автора =) 14.07.2008 от ROM 1 Комментарий »

Деловые встречи, переговоры, контакты с другими людьми съедают львиную долю времени большинства руководителей. Вот почему их следует серьезно обдумывать и тщательно планировать.

Патрик Форсайт “Делу - время”

Книги Патрика Форсайта:
Руководство по выживанию в компании
Маркетинг в книгоиздании
Консалтинг. Как основать консалтинговое агентство и добиться успеха
Успешные переговоры
Голая правда о… маркетинге
Мастерство продажи


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

Похожие посты:
  • None Found
Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: Фразы |

Как я могу увеличить или уменьшить текст.

Фото автора =) 08.07.2008 от ROM Комментарии (2) »

Спонсор поста: Большие ортопедические матрасы для кроватей.

Оригинал

Как я могу увеличить или уменьшить текст с jQuery?

Посмотрите пример.

Есть несколько путей, которыми вы можете достичь этой цели. Мы покажем только одну. Сначала давайте сделаем простую страничку.

<div>  
    <p id="text">  
     This is some text. This is some text. This is some text. This is some text. This  
     is some text. This is some text. This is some text. This is some text. This is some  
     text. This is some text. This is some text. This is some text. This is some text.  
     This is some text. This is some text. This is some text. This is some text. This  
     is some text. This is some text.  
    </p>  
    <a href="#" id="smallerTextLink">Smaller Text</a>  
    <a href="#" id="largerTextLink">Larger Text</a>  
  </div>

Здесь мы сделали некоторый текст и две ссылки. Когда кликаются ссылки, мы смотрим, что текст надо увеличить или уменьшить. Теперь давайте посмотрим на jQuery:

$(document).ready(function()
{
$('a').click(function()
{
    var theElement = $("#text").css("font-size");
    var textSize = parseFloat(theElement, 10);
    var unitOfMeasurement = theElement.slice(-2);

    if ( (this).id == "largerTextLink")
    {
	textSize += 2;
    }
    else
    {
	 textSize -= 2;
    };

    $('p').css("font-size",  textSize + unitOfMeasurement);

    return false;
    });
});

Как всегда рассмотрим код шаг за шагом.

$(document).ready(function()
        {
            $('a').click(function()

Когда документ готов, мы смотрим на все теги “а” и запускаем функцию.

var theElement = $("#text").css("font-size");
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);

Здесь мы сделали несколько вариантов. “theElement” найдет параграф с id=”text” и возьмет его размер шрифта из CSS. Когда мы добавляем свойство в круглых скобках, мы говорим jQuery получить размер шрифта параграфа. Этот параметр может быть возвращен как номером, так и параметром (то есть 20px). Нам необходимо их разделить.

Переменная “textSize” использует метод “parseFloat”. Этот метод просмотрит все значения и уберет нецифровые символы. В этом случае мы разбираем свойство font-size, чтобы избавиться от “px”. “10” обозначает, что мы работаем с базовым шрифтом десятого размера.

“unitOfMeasurement” берет едеиницу измерения шрифта путем получения последних двух символов (px). Нам это необходимо, чтобы добавить новое значение.

if ( (this).id == "largerTextLink")
{
	textSize += 2;
}
else
{
	textSize -= 2;
};

This if statement is checking to whether the anchor tag that was clicked has an id of “largerTextLink”. If it does, then we’re going to add 2px to the textSize. This is the same as writing - textSize = textSize + 2 -. If it is not, the user must have clicked the “smallerTextLink” anchor tag. In that case, we’ll decrease the textSize by 2px.

Это выражение проверяет, был ли кликнут тэг с id=”largerTextLink”. Если был, тогда мы собираемся добавить 2px к textSize. Если нет, значит пользователь кликнул “smallerTextLink”. В этом случае мы уменьшаем textSize на 2px.

$('p').css("font-size",  textSize + unitOfMeasurement);
return false;

Наконец мы собираемся задать параграфу новое значение. Font-size будет задано новое значение textSize плюс unitOfMeasurement. Очень просто, правда?


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

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: JQuery, Переводы |

29

Фото автора =) 07.07.2008 от ROM Комментариев нет »

Управлять временем не научишься до тех пор, пока не станешь правильно и грамотно классифицировать вид своих занятий.

Патрик Форсайт “Делу - время”

Книги Патрика Форсайта:
Руководство по выживанию в компании
Маркетинг в книгоиздании
Консалтинг. Как основать консалтинговое агентство и добиться успеха
Успешные переговоры
Голая правда о… маркетинге
Мастерство продажи


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

Похожие посты:
  • None Found
Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: Фразы |

Солянка апокалиптическая

Фото автора =) 01.07.2008 от ROM Комментарии (3) »

Что-то почитал я Давыдова, послушал РБК и всерьез задумался о кризисе. Точнее их два, но один связан с другим непосредственно.
Первый кризис - экономический.
Это будет последствия всемирного кризиса, который начался в США, как в самой гнилой стране =). Об экономическом кризисе хорошо пишет Дмитрий Давыдов.
Второй кризис - энергетический.
Нефть заканчивается. Газ тоже закончится. Но альтернативной энергии на всех не хватит. Россия мало строит ветряков, солнечных электростанций и прочее. (Интересно, а вообще хоть что-нибудь строит?)
А Вы знаете, что еще в начале автомобилестроения человечество выбрало простой, но смертельный путь - бензиновый двигатель? Когда-то на машинах были паровые двигатели, бензиновые и электрические. Ну от паровых отказались по понятным причинам. А вот от электрических отказались только из-за того, что в те времена не было развито электроснабжение. В результате мы имеем загразненную атмосферу, заканчивающуюся нефть, землетрясения из-за движения земной коры. Глобальное потепление и наводнения и т.д. и т.п.
Когда-то читал книжку. Не помню, как называется и кто автор. В ней параллельные миры находились на параболе. И героям надо было попасть на другую ветку, надо было пройти все миры. И вот они попали в мир, где природа агонизировала из-за того, что люди там пошли по пути развития паровых двигателей, работающих на угле. А уголь один из самых вредных природных ископаемых, т.к. при его горении сжигается больше всего кислорода.

Как выжить в кризисы? У меня есть только одна мысль: поиметь домик в теплой части суши с кусочком земли. Некоторые говорят, что лучше в Восточной Сибири, но я думаю о районах южнее. Дом поможет спастить от некоторой непогоды. Земля сможет прокормить. Но не все могут работать на земле. Мы привыкли сидеть в офисах, давить кнопки. Добывать продукты в магазинах… Печально =( Те, кто работает на земле, как раз и смогут выжить. Они и будут этим 0,01%, которому гарантируется выживание.

А Вы знаете, что календарь Майа заканчивается в Декабре 2012 года? Сейчас у нас заканчивается “Пятое солнце”. Т.е. пятый этап жизни человечества на земле. Обидно, что мало осталось, а еще столько добрых дел не сделано!
Более подробно о цивилизации Майа можете почитать тут.

Кстати, это последние выходные первого полугодия. Можно подвести итоги, что сделано, а что еще не сделано из плана. Чего добились, а что упустили. Посмотреть, оценить и за оставшееся полугодие доделать, чтобы новый год начать с нового плана успеха.
У меня наметилось глобальное отставание. Но это и понятно. У меня не было опыта содержания маленьких детей. То время, которое раньше тратил на себя, трачу на общение и занятия с сыном.

Мало кто из моих читателей знает обо мне всё. Вот небольшой шанс немного узнать обо мне:

.

Чем люди только не увлекаются! Оказывается, даже создают сайты про верблюдов! (О верблюде надо знать всё. Скоро они к нам придут в связи с глобальным потеплением). Вот здесь можно посмотреть фото верблюдов и ознакомиться с их ТТХ =)


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

Похожие посты:
  • None Found
Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: Без рубрики |


Рубрики:

Управление:

Счетчики:




Рейтинг блогов
Рейтинг блогов
Рейтинг блогов
Яндекс цитирования
Каталог блогов Blogdir.ru
количество читателей онлайн и всего
Каждому своё…
Блог о jQuery, Linux и немного программировании

Узнайте о размещении рекламы в этом блоге. >>>

Узнайте о размещении рекламы в этом блоге. >>>