如何使用jQuery操作图像-仅限水平

How to manipulate image with jQuery - horizontal only

本文关键字：水平 图像 何使用 jQuery 操作      更新时间：2023-09-26

我想在鼠标悬停时操作图像，只有宽度改变，但高度保持不变。我看到图像画布与实际图像不符，所以我再也看不到他的手了。我怎样才能拉伸宽度？

http://jsfiddle.net/Z8knE/3/

div
{    
    background-image: url( http://t2.gstatic.com/images?q=tbn:ANd9GcQmloy1dlrNWhp8Y2u3lEKYEnLvJAqWVhggUIrA_QwRxjenmus-Ww);
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    height:150px;
    width:150px;
}

试试这样的东西：

JSFIDDLE

您不需要使用jQuery，只需使用纯CSS即可。

删除：

background-size:100% 150px;

并添加：

max-height:150px;

诀窍是背景大小可以同时传递宽度和高度参数。将宽度设置为100%，将高度设置为您想要的任何静态高度。然后，当框展开时，图像将变得更宽而不是更高。

http://jsfiddle.net/Z8knE/5/

div
{    
    background-image: url( http://t2.gstatic.com/images?q=tbn:ANd9GcQmloy1dlrNWhp8Y2u3lEKYEnLvJAqWVhggUIrA_QwRxjenmus-Ww);
    background-size: 100% 150px;
    height:150px;
    width:150px;
}

或者，如果你实际上不想改变盒子上的高度，就像你原来的小提琴里有一样，你可以简单地从jQuery中删除这个属性，就像这样：

编辑：此fiddle包含以下javascripthttp://jsfiddle.net/Z8knE/15/

$(document).ready(function(){
  $("div").mouseenter(function(){
      $("div").animate({width:"500px"},{duration: 1000, easing: 'easeOutBounce'});
  });
     $("div").mouseleave(function(){
         $("div").animate({width:"150px"},{duration: 1000, easing: 'easeOutBounce'});
  });
});
相关文章：