更改鼠標懸停拇指效果縮小放大

我在不久前發現了鼠標懸停效果，但我想稍微改變它。目前它縮小鼠標懸停，但我想它放大IN。因此，默認狀態是拇指的實際尺寸，然後mouseover按照當前縮小的方式放大它們。更改鼠標懸停拇指效果縮小放大

下面是對的jsfiddle的CSS/HTML代碼：http://jsfiddle.net/k9TbE/5/

HTML：

<div class="thumbs"> <a href="project.html"> 
     <span class="thumbInfo">Client Name<h4>Project Name</h4></span> 
     <img class="lazy" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPEOsFC2tci90_yQTxEfD5gXWOBzI3Rz2wIchkmm2VdNBN57RttD4kiUk" alt="" /> 
    </a> 

</div>

CSS：

.thumbs { 
    width: 219px; 
    height: 170px; 
    margin: 0px 10px 10px 0; 
    overflow: hidden; 
    position: relative; 
    float: left; 
} 
.no-margin { 
    margin-right: 0; 
} 
.thumbs a { 
    display: block; 
    position: relative; 
} 
.thumbs a img { 
    width: 250px; 
    height: 200px; 
    top: -10px; 
    left: -20px; 
    position: relative; 
} 
.thumbs a span { 
    width: 100%; 
    height: 100%; 
    color: #FFFFFF; 
    font-family:'EurostileLT-Demi', Verdana; 
    font-size: 18px; 
    font-weight: normal; 
    font-style: normal; 
    letter-spacing: 0px; 
    padding-top: 65px; 
    position: absolute; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    z-index: 100; 
    display: none; 
} 
.thumbs a span h4 { 
    font-family:'EurostileLT', Verdana; 
    font-size: 13px; 
    font-weight: normal; 
    font-style: normal; 
    letter-spacing: 1px; 
    line-height: 18px; 
    margin: 0; 
}

的Javascript：

$(document).ready(function() { 
    $('.thumbs').mouseenter(function (e) { 
     $(this).children('a').children('img').animate({ 
      height: '170', 
      left: '0', 
      top: '0', 
      width: '219' 
     }, 100); 
     $(this).children('a').children('span').fadeIn(200); 
    }).mouseleave(function (e) { 
     $(this).children('a').children('img').animate({ 
      height: '200', 
      left: '-20', 
      top: '-10', 
      width: '250' 
     }, 100); 
     $(this).children('a').children('span').fadeOut(200); 
    }); 
});

任何人都可以請我幫忙嗎？ :-) 我真的很感激它。

來源

2014-05-13 dem0n

你可以只用css來做。你必須做的是在懸停時縮放圖像。你可以使用這個http://ferretarmy.com/files/css-animation/tutorial1/examples/example1.html – Dramorian

試試這個：

CSS：

.thumbs a img { 
    width: 219px; 
    height: 170px; 
    position: relative; 
}

的Javascript：

$(document).ready(function() { 
    $('.thumbs').mouseenter(function (e) { 
     $(this).children('a').children('img').animate({ 
      height: '200', // Changed this part 
      left: '-20', // * 
      top: '-10', // * 
      width: '250' // * 
     }, 100); 
     $(this).children('a').children('span').fadeIn(200); 
    }).mouseleave(function (e) { 
     $(this).children('a').children('img').animate({ 
      height: '170', // With this part 
      left: '0',  // * 
      top: '0',  // * 
      width: '219' // * 
     }, 100); 
     $(this).children('a').children('span').fadeOut(200); 
    }); 
});

我所做的是：我改變了默認CSS設置爲<img>在年初被縮小並更改了Javascript，因此它正在放大，而不是在mouseenter上縮小，而是縮小而不是放在上。

JS小提琴：http://jsfiddle.net/k9TbE/6/

來源

2014-05-13 12:26:56 Robin

這樣做！非常感謝你的codezombie。奇蹟般有效：） – dem0n

更改鼠標懸停拇指效果縮小放大

回答

相關問題