Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)

Бодибилдинг
Программы тренировок для занятий штангой, гантелями; описание тренажеров

Я записываю курсы!
  Курс валют

НБУ курс евро






CSS3 - Передвижные фотографии на JQuery



Фотографии становятся все более и более популярным в наши дни. Сегодня мы собираемся создать простую фотогалирею, используя некоторые из новых функций CSS3 и JQuery. Характерной особенностью является то, что галерею вы сможете перетащить 1 фотографию с одним нажатием кнопки. Надеемся, вам понравится это и понять его будет легко.

Давайте взглянем на то, что мы будет строить, вот результат демо, исходники

Шаг 1: Подготовка файлов

Давайте начнем с создания наших необходимых файлов:
1. Index.html (основная страница)
2. style.css (этот файл будет содержать все стили, что нам нужно)
3. script.js (это один документ будет содержать наш сценарии)

В этом уроке я использовал фотографии природы, но вы можете выбрать свои фотографии. Здесь же и текстуры которые я использовал в этом уроке.

Теперь создайте новую папку, и назовите ее "images", а затем поместить в выбранные фотографии.

Шаг 2: HTML структуры файла

Прежде всего мы должны сослться на CSS, JavaScript файлы, и на jquery.min.js, jquery-ui.min.js, для этого просто вставить этот код между тегом head:

<script type="text/<span class="><!--mce:0--></script>
<script type="text/<span class="><!--mce:1--></script>
<script type="text/<span class="><!--mce:2--></script>
<link rel="stylesheet" type="text/css" href="style.css" />

Теперь мы должны показать изображения.

<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />

Шаг 3: Добавление некоторых стилей!

Теперь у нас есть готовый HTML-файл, мы должны добавить некоторые стили для наших изображений:

body
{
    background: url(texture.jpg);
}
img
{
    padding: 10px 10px 50px 10px;
    background: #eee;
    border: 1px solid #fff;
    box-shadow: 0px 2px 15px #333;
    -moz-box-shadow: 0px 2px 15px #333;
    -webkit-box-shadow: 0px 2px 15px #333;
    position: relative;
    margin:25px 0 0 15px;
}

Пояснение:

Здесь я добавил фоновое изображение. На каждое изображения поставили фон светло-серый и использовали некоторые правила, чтобы придать традиционную форму Polaroid. Также я использовал некоторые CSS3 правила для создания образа простой тени. Затем я использовал margin, чтобы освободить место между изображениями.

Шаг 4: Настало время для написания сценария

Теперь у нас есть исходные материалы для создания сценария, мы должны написать несколько сценариев и меть рабочую Polaroid.

Сначала добавьте это к вашему script.js файл:

$(document).ready(function(){
 var zindex = 1;
 $("img").draggable({
  start: function(event, ui) {
   zindex++;
   var cssObj = { 'z-index' : zindex };
   $(this).css(cssObj);
  }
 });
});

Я определил переменную с именем zindex и возложил на нее 1 в качестве значения. Тогда я использовал JQuery функции пользовательского интерфейса, чтобы каждое изображение перетаскивать. Когда изображение вытащили zindex значение будет увеличиваться на 1, то я использовал $(this).css для изменения Z-index вытащили изображения.

Давайте продолжим, вставьте этот код в предыдущий:

$('img').each(function(){
  var rot = Math.random()*30-15+'deg';
  var left = Math.random()*50+'px';
  var top = Math.random()*150+'px';
  $(this).css('-webkit-transform' , 'rotate('+rot+')');
  $(this).css('-moz-transform' , 'rotate('+rot+')');
  $(this).css('top' , left);
  $(this).css('left' , top);
 $(this).mouseup(function(){
 zindex++;
 $(this).css('z-index' , zindex);
 });
});
$('img').dblclick(function(){
  $(this).css('-webkit-transform' , 'rotate(0)');
  $(this).css('-moz-transform' , 'rotate(0)');
});

Здесь я использовал .each() метод, для каждого изображения создаются три переменные: поворот градусов, на верхней позиции и левое положение. Для каждой переменной необходимо использовать некоторые математические значения: Math.random возвращает значение между 0 и 1, поэтому мы должны контролировать и другие значения, чтобы получить номера нужно: за первой переменной всегда будет возвращаться значение между 15 и -15 градусов.

В левой верхней позиции, я использовал те же формулы, но я изменил некоторые значения. После подготовки переменных мы должны их использовать. Для этого мы будем использовать тот же метод что мы использовали в предыдущем коде (this.css), тоесть изменить вращение градусов, на верхней позиции и в крайнем левом положение каждого изображения, так что мы можем получить случайное появления.

После всего этого я использовал. MouseUp метод, когда на изображение нажали это будет показано. Также Вы можете добавить что-то полезное: при нажатии кнопки двойном щелчке мышью мы будем корректировать ее вращать. Теперь наш файл сценария должен выглядеть следующим образом:

$(document).ready(function(){
 var zindex = 1;
 $("img").draggable({
  start: function(event, ui) {
   zindex++;
   var cssObj = { 'z-index' : zindex };
   $(this).css(cssObj);
  }
 });
$('img').each(function(){
 var rot = Math.random()*30-15+'deg';
 var left = Math.random()*50+'px';
 var top = Math.random()*150+'px';
 $(this).css('-webkit-transform' , 'rotate('+rot+')');
 $(this).css('-moz-transform' , 'rotate('+rot+')');
$(this).css('top' , left);
 $(this).css('left' , top);
 $(this).mouseup(function(){
 zindex++;
 $(this).css('z-index' , zindex);
 });
});
$('img').dblclick(function(){
 $(this).css('-webkit-transform' , 'rotate(0)');
 $(this).css('-moz-transform' , 'rotate(0)');
});
});

Вот и все!

Спасибо за внимание, я надеюсь, что вам понравилось и можно следовать шаг за шагом. Если вы все сделали правильно, вы должны в итоге имеем что-то вроде этого. Если у вас возникли проблемы или вам нужна помощь не стесняйтесь написать свой вопрос в разделе комментариев.



Больше информации читайте по теме:



Оценить статью:

Оценивая статью, Вы подсказываете нам насколько данная информация стала полезной именно для Вас. Мы ожидаем, прежде всего, оценку доступности материала для понимания и простоты его изложения. Дополнительные комментари, вопросы, дополнения и замечания Вы можете указать на странице От Вас

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Черный список покупателей
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок