Поиск:
  • Страница 1 из 1
  • 1
Модератор форума: Senator  
Красивое увеличение картинки с эффектом вращения при наведе
Дата: Воскресенье, 10.04.2011, 19:44 | Сообщение # 1
Offline
  • Проверенный
  • 1828 Сообщения

[Table]Интересный, качественно реализованный эффект увеличения картинки при наведении курсора мышки

Установка:

После /head на нужных страницах вставляйте: [/Table]

Code
<script src="/js/init.js" type="text/javascript"></script>  
<script src="/js/raphael.js" type="text/javascript"></script>  
<style>ul.reset,  
ul.reset li {  
display:block;  
list-style:none;  
padding:0;  
margin:0;  
}  
.gallery ul li {  
width:200px; /* a half of image width */  
height:200px; /* a half of image height */  
margin:0 10px 10px 0;  
float:left;  
position:relative;  
}  
.holder {  
position:absolute;  
top:0;  
left:0;  
margin:-100px 0 0 -100px; /* margin-left: a half of 'li' width and margin-top: a half of 'li' height */  
}  
</style>  

Следующий код в то место, где будет сама картинка:  
<div class="gallery">  
<ul class="reset">  
<li><img src="Ссылка на картинку" border="0" /></li>  
</ul>  
</div>

[Table]При желании и знании css вы легко сможете отредактировать все параметры скрипта под себя

Осталось лишь залить два скрипта из прикреплённого архива в папку js

Ссылка на файл 2[/Table]

  • Страница 1 из 1
  • 1
Поиск:
Администрация проекта не несет ответственности за публикуемые материалы.
Дизайн полностью принадлежит "Up-Rise.Ru".
Дизайн сайта разработал life_man.
© 2024 Сайт управляется системой uCoz.