Скрин CSS
Code
*
{
margin: 0;
padding: 0;
}
body
{
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.fisheye{
text-align: center;
height: 50px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{
background-color: #fff;
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}
HTML
Code
<div id="fisheye" class="fisheye">
<div class="fisheyeContainter">
<a href="#" class="fisheyeItem"><img src="Адрес картинки 1" width="30" /><span>Название ссылки 1</span></a>
<a href="#" class="fisheyeItem"><img src="Адрес картинки 2" width="30" /><span>Название ссылки 2</span></a>
<a href="#" class="fisheyeItem"><img src="Адрес картинки 3" width="30" /><span>Название ссылки 3</span></a>
<a href="#" class="fisheyeItem"><img src="Адрес картинки 4" width="30" /><span>Название ссылки 4</span></a>
<a href="#" class="fisheyeItem"><img src="Адрес картинки 5" width="30" /><span>Название ссылки 5</span></a>
<a href="#" class="fisheyeItem"><img src="Адрес картинки 6" width="30" /><span>Название ссылки 6</span></a>
<a href="#" class="fisheyeItem"><img src="Адрес картинки 7" width="30" /><span>Название ссылки 7</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 20,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 60,
proximity: 10,
halign : 'center'
}
)
}
);
</script>
Это ставим в head
Code
<script type="text/javascript" src="http://scriptozna.ucoz.ru/js/jquery.js"></script>
<script type="text/javascript" src="http://scriptozna.ucoz.ru/js/interface.js"></script>
