Форум

sash_ok.83 · #1 (**permalink**) 28.06.2012, 08:46

(На страничке ) поставил с помощью jquery плавное увеличение картинок.

Когда картинка одна , увеличение идет относительно правого верхнего угла.

А если картинки идут в ряд, то первая увеличивается относительно своего правого верхнего угла, а остальные "теряют ориентацию".

Подскажите пожалуйста в чем может быть проблема.

Deff · #2 (**permalink**) 28.06.2012, 10:46

<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;

В общем случае зависят и от центрирования и размеров картинки( приведённые выше цифры были для картинки центрированной по левому краю - так что при первых неудачах в центрировании большой картинки - не огорчаемся - а подбираем цифру

bes · #3 (**permalink**) 30.06.2012, 12:22

<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>

Форум

Справочник

Discord чат

Курсы javascript