<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("#block").click(function(){
zoom();
setTimeout(' zoom2();', 1300)
});
})
function zoom(){
$("#block").animate({
width: "300px",
height:"300px",
opacity: 0.3,
left: 100/2*(-1),
top: 100/2*(-1)
}, 1300 );
$('#ptext').slideDown(1300);
$('#ptext2').toggle(1300);}
function zoom2(){
$("#block").animate({
width: "200px",
height:"200px",
opacity: 1.0,
left: 0,
top:0
}, 1300 );
//$('#ptext').slideUp(1300);
// $('#ptext2').toggle(1300);
}
</script>
<style type="text/css">
body {color:white;text-align:center; font-family: 'georgia'; font-size: 13px; } /* not important */
.basic {
width:200px;
height:200px;
float:left;
position:relative;
overflow:hidden;
}
.basic a img {
width:200px;
position:relative;
border:none;
}
.clear { clear:both; }
.ptext{
height:35px;
position:absolute;
top:-13px;
left:0px;
width:100%;
display:none;
background:#0c4b62;
color:white;
opacity:0.9;
}
.ptext2{
height:35px;
position:absolute;
bottom:-13px;
left:0px;
width:100%;
display:none;
background:#0c4b62;
color:white;
opacity:0.9;
}
.ptext .ptextInside{
padding:0px;
margin:0px;
}div {
position: absolute;
background-color: #abc;
left: 4px;
top:30px;
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<div class="basic">
<a href="#"><img id="block"src="images/15.jpg" width="200" height="200" /> </a>
<p class="ptext" id="ptext">CofeeNerd</p>
<p class="ptext2" id="ptext2">CofeeNerd</p>
</div>
</body>
</html>
Короче говоря это реально проще сделать на флеш. То что написал я просто делает зум и реверс , потом отображает верхнюю и нижнюю надпись. Но заметил что сначала появляется сам фон а потом выезжает надпись.Так и с нижним.
Короче говоря к этим частям нужно применять какой нить плагин slider.
В общем работает по клику, думаю что заменить что то не составит труда, например срабатываение при наведении или еще что.
1. Зум есть
2. Можно сделать появление обьекта в верху и внизу с помощью моей писанины , а потом применить к ним плагин с эффектом слайдера.Таких масса.
Если будут вопросы,пишите.
