Блог
Главная » jQuery » Контекстные выдвижные элементы страницы на jQuery и CSS3 для uCoz
06:45




Смотрим ДЕМО

Основная идея заключается в создании легко настраиваемого набора контекстных выдвижных элементов.

Установка:

Это нужно вставить в head и /head:
Code

<link rel="stylesheet" type="text/css" href="styles.css" />


Это вставляем в body и /body:
Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>


Вставляем после body :
Code

<div class="main">

  <p title="A New Tutorial Every Week" style="top:200px;left:120px;">
   
  <a href="http://tutorialzine.com/category/tutorials/"><img class="spaceBottom" src="img/1.jpg" width="620" height="260" title="Browse through our collection of tutorials" alt="A diverse collection of practical tutorials" /></a>
   
  Since its inception, Tutorialzine has brought you a fresh web development tutorial every week.
  You can browse through our collection of articles <a href="http://tutorialzine.com/category/tutorials/">here</a>.
  </p>
   
  <p title="2200+ Twitter Followers" class="openTop openLeft blue" style="top:400px;left:650px;">
  Become one of our twitter followers and receive every design and development update we share with the community.
  <a href="http://twitter.com/Tutorialzine"><img src="img/2.jpg" title="Follow us" class="spaceTop" alt="Follow us on twitter" width="460" height="210" /></a>
  </p>
   
  <p title="Over 5000 RSS Subscribers" class="openTop red" style="top:500px;left:90px;">
  Subscribe to our RSS feed and receive our tutorials the instant they are published.
  <a href="http://feeds.feedburner.com/Tutorialzine"><img src="img/3.jpg" class="spaceTop" alt="Subscribe" title="Subscribe" width="400" height="180" /></a>
  </p>

</div>


bg.jpg - Фон страницы ( можно заменить на свой)

Категория: jQuery

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
  • Зайдете ли вы к нам еще?