Question

我正在创建一个功能，我需要从每个li中获取内联变换比例值。

下面我为您创建了一个帮助我的演示？

HTML

<div style="color:red;transform:scale(1);">Dummy content</div>

JS

$(function(){
   $('div').click(function(){
   var trans=$('div').css('transform');
   console.log(trans);  
  });
});

提前致谢！

--------------------更新------------------------

我认为我的问题不能解决我目前遇到的问题，所以请查看下面的代码表以供参考。

http://codepen.io/anon/pen/vOzoWv

以下是可能无法检入codepen的可用代码：

HTML

<ul>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.55); margin-top: -100px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.6); margin-top: -80px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.7); margin-top: -40px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.8); margin-top: 1px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.9); margin-top: 50px;">
    </li>
    <li class="image-container">
        <img src="static/images/fileeebox/Receipt.jpg" alt="Receipt" style="transform: scale(1); margin-top: 100px;">
    </li>
    <li class="image-container">
        <img src="static/images/fileeebox/Receipt.jpg" alt="Receipt" style="transform: scale(1.1); margin-top: 200px;">
    </li>
    <li class="image-container" style="display: none;">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(1.1); margin-top: 200px;">
    </li>
    <li class="image-container" style="display: none;">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(1.2); margin-top: 700px;">
    </li>
    <li class="image-container" style="display: none;">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt">
    </li>
</ul>

CSS：

ul li.image-container img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
    transition: all 600ms ease-in-out;
    list-item-style:none;
}
ul li.image-container:last-child img {
    transform: scale(1.2);
    margin-top: 700px;
}
ul li.image-container:nth-last-child(2) img {
    transform: scale(1.1);
    margin-top: 200px;
}
ul li.image-container:nth-last-child(3) img {
    transform: scale(1);
    margin-top: 100px;
}
ul li.image-container:nth-last-child(4) img {
    transform: scale(0.9);
    margin-top: 50px;
}
ul li.image-container:nth-last-child(5) img {
    transform: scale(0.8);
    margin-top: 1px;
}
ul li.image-container:nth-last-child(6) img {
    transform: scale(0.7);
    margin-top: -40px;
}
ul li.image-container:nth-last-child(7) img {
    transform: scale(0.6);
    margin-top: -80px;
}
ul li.image-container:nth-last-child(8) img {
    transform: scale(0.55);
    margin-top: -100px;
}
ul li.image-container:nth-last-child(9) img {
    transform: scale(0.5);
    margin-top: -120px;
}
ul li.image-container:nth-last-child(10) img {
    transform: scale(0.45);
    margin-top: -140px;
}
ul li.image-container:nth-last-child(n+10) img {
    transform: scale(0.4);
    margin-top: -155px;
}

JS

$(function(){
    $('img').click(function(){
        var arrImages=$('li.image-container');
        var length=arrImages.length;
        var lastElement=$(arrImages).find(':visible').last();
        var i;
        for(i=length-1;i>=0;i--){
            var obj=$(arrImages[i]);
            var prevMargin=$(obj).eq(i-1).find('img').css('margin-top');
            var prevScale=$(obj).eq(i-1).find('img').css('transform');
            alert(prevMargin);
            alert(prevScale);
        }
    });
});

Answer 1

- 更新

好的，因为您之前的帖子中的信息并不明显，我只是在这里更新答案。这应该是你正在寻找的。

$(function() {
  $('img').click(function(){
    var arrImages = $('li.image-container');
    var length = arrImages.length;
    var lastElement = $(arrImages).find(':visible:last');
    var i;
    for( i = length -1; i >= 0; i-- ) {
      var obj = $(arrImages[i]);
      if (i < length - 2 && i !== 0) {
        var prevMargin = arrImages.eq(i - 1 ).find('img').css('margin-top');
        var prevScale = arrImages.eq(i - 1 ).find('img').css('transform');
        console.log(prevScale);
      }
    }
  });
});

无法使用jquery获取内联变换比例

1 个答案: