Плавное увеличение картинки
(На страничке ) поставил с помощью jquery плавное увеличение картинок.
Когда картинка одна , увеличение идет относительно правого верхнего угла. А если картинки идут в ряд, то первая увеличивается относительно своего правого верхнего угла, а остальные "теряют ориентацию". Подскажите пожалуйста в чем может быть проблема. |
<body style="padding-top:45px;">
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style>
table.prev {
width:0;
border-collapse:collapse;
border:solid 1px transparent;
}
table.prev td{
padding:0 4px;
}
.tryam{
border:solid 3px #fff!important;
}
.Myimg {
text-align:center;
border:solid 4px #fff!important;
border-bottom-width:6px!important;
background-color: #D6C59B;
width:100px;
position:absolute;
display:none;
z-index:100;
margin-top:-100px;
margin-left:-30px;
box-shadow: 0px 2px 8px #7C7259;
-webkit-box-shadow:0px 2px 8px #7C7259;
-khtml-box-shadow:0px 2px 8px #7C7259;
-moz-box-shadow:0px 2px 8px #7C7259;
}
}
#ObrmlTable{
padding:34px;
}
</style>
<center><div id=ObrmlTable>
<table class=prev><tr>
<td><img class="tryam" src="http://uploads.ru/i/Y/W/j/YWjoh.png" width="60"/><div class="Myimg" style="display:none;"><img src="http://uploads.ru/i/Y/W/j/YWjoh.png" style="width:100%;"/></div></td>
<td><img class="tryam" src="http://uploads.ru/i/Y/W/j/YWjoh.png" width="60"/><div class="Myimg" style="display:none;"><img src="http://uploads.ru/i/Y/W/j/YWjoh.png" style="width:100%;"/></div></td>
<td><img class="tryam" src="http://uploads.ru/i/Y/W/j/YWjoh.png" width="60"/><div class="Myimg" style="display:none;"><img src="http://uploads.ru/i/Y/W/j/YWjoh.png" style="width:100%;"/></div></td>
</tr></table></div></center>
<!--Увеличилка картинок по наведению-->
<script type="text/javascript">
$(document).ready(function(){
$('table.prev .Myimg').each(function (i){
$(this).attr("alt",i)
});
$('img.tryam').mouseover(function(){
var a=$(this).parent().children('.Myimg').attr("alt")
$('table.prev .Show').each(function (){
if($(this).attr("alt")!=a)$(this).removeClass('Show').hide('slow');
});
$(this).parent().children('.Myimg').addClass('Show').show('slow');
}).mouseout(function(){
});
$('.Myimg img').mouseover(function(){
}).mouseout(function(){
$(this).parent('.Myimg').removeClass('Show').hide('slow');
});
});
</script>
Ps: (*Значения .Myimg { margin-left: -30px; margin-top: -100px; В общем случае зависят и от центрирования и размеров картинки( приведённые выше цифры были для картинки центрированной по левому краю - так что при первых неудачах в центрировании большой картинки - не огорчаемся - а подбираем цифру |
<div id="div1">
<img
src="http://legal2b.ru/bitrix/templates/legal2b_second/images/articles/registration/limited_01_small.jpg">
<img
src="http://legal2b.ru/bitrix/templates/legal2b_second/images/articles/registration/limited_02_small.jpg">
<img
src="http://legal2b.ru/bitrix/templates/legal2b_second/images/articles/registration/limited_03_small.jpg">
</div>
<div id="div2" style="position: relative">
</div>
<script>
window.onload = function () {//onload begin
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.onmouseover = function (e) {//onmouseover begin
e = e || event;
var target = e.target || e.srcElement;
var count = 457;
var step = 6;
var coof = 1;
if (target.parentNode == div1) {//if begin
var img = document.createElement('img');
img.src = target.src.replace('small', 'big');
img.style.position = 'absolute';
img.style.left = '0px';
img.style.top = '0px';
div2.appendChild(img);
img.width = 0;
for (var i = 0; i < count; i += step) {
setTimeout(function () {img.width += step}, i*coof);
}
target.onmouseout = function () {
for (var i = 0; i < count; i += step) {
setTimeout(function () {img.width -= step; if (img.width <= 0) div2.removeChild(img)}, i*coof);
}
}
}//if end
}//onmouseover end
}//onload end
</script>
|
| Часовой пояс GMT +3, время: 10:52. |