Question

我正在使用以下jQuery根据宽度调整div的高度：

<script type="text/javascript">
  jQuery(function(){
    jQuery(window).bind("load resize",function(e){
      jQuery(".showcase .image_container").css('height', jQuery(".showcase .image_container").width()/'1.7438');
    });
  });
</script>

这个效果很好但我想用“transform：translate3d”在悬停时移动这个div中的图像：

.showcase .image_container:hover img { transform: translate3d(0px, -150px, 0px); }

如何根据.image_container的宽度使用jQuery调整Y值（150px）。即。

.image-container width / 3.2667

谢谢！

Answer 1

您可以附加//main function int arr1[20]; int arr2[20]; int size=read_strings(arr1,arr2); print_sum(arr1,arr2,size);的事件处理程序，并在其中执行您需要的操作。

请参阅 this jsFiddle demo 。

相关代码是：

mouseover/mouseout

为什么var timerID; $('.showcase .image_container img').on('mouseover', function () { clearTimeout(timerID); $(this).css('transform', 'translate3d(0px, -' + $('.showcase .image_container img').width()/3.2667 + 'px, 0px)'); }).on('mouseout', function (e) { var self = this; timerID = setTimeout(function () { $(self).css('transform', 'translate3d(0px, 0px, 0px)'); }, 1000); });？否则，当图像向上移动并且光标移出时，会遇到setTimeout()触发的问题。

使用jQuery根据容器宽度调整“transform：translate3d”

1 个答案: