Плавное уменьшение фона на сайте
Добрый день... На сайте реализовал слайдер фона с эффектом уменьшения картинки, уменьшаю, сменяя ее width всего на 20 пикселей, использую animate(). Все работает, но картинка дергается при уменьшении, что не есть хорошо... Нашел сайт, на нем реализована такая задача http : / / pacifico-html.cmsmasters.net/index-frame.php - это сайт, с демо шаблоном, вот эффект примерно как на нем мне и нужен, в нете найти так и не смог.
|
А шаг поменьше взять, напрмер в 1 пиксель, не пойдет?
|
<img width="336" src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'id='img'>
<script>
var a = document.getElementById('img').width
var inter = setInterval(function () {
document.getElementById('img').width = a
a+=10
if(a>600) clearInterval(inter)
},50)
</script>
|
kichik,
Вам скорее нужно искать зумм картинки Типо Zoom при наведении: http://hostjs-mybb2011.narod.ru/Zoom.htm
<style>
img.Zoom{
position:absolute;
opacity:1.0;
transition-duration: 1.66s;
-webkit-transition-duration: 1.66s;
-moz-transition-duration: 1.66s;
-o-transition-duration: 1.66s;
-ms-transition-duration: 1.66s; /* IE9+ */
}
</style>
<div style="overflow:hidden;border:2px red solid;background-color:red;position:relative;width:400px;height:400px;">
<img class=Zoom src="http://uploads.ru/i/r/2/N/r2Nbh.jpg" onmouseover="this.style.height='200%';this.style.width='200%'" onmouseout="this.style.height='100%';this.style.width='100%'" style="width:100%;height:100%;">
</div>
|
| Часовой пояс GMT +3, время: 06:00. |