用戶將鼠標懸停在圖像上時，如何獲得圖像的縮放效果？

在Nikon網站上發現了一個非常美觀的效果。當我將鼠標懸停在它們上方時，圖像傾向於放大。用戶將鼠標懸停在圖像上時，如何獲得圖像的縮放效果？

使用CSS可以實現這個嗎？如果是這樣如何？

2013-01-03 user1266515

http://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/ – Zabba

與所有應有的尊重，請不要離開評論推理反對票，所以我可以學習不該做什麼。 – user1266515

CSS懸停的好例子。請參閱變焦&便盆部：「縮放和平移」

檢查this和this鏈接

/*GROW*/ 
.grow img { 
    height: 300px; 
    width: 300px; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
} 

.grow img:hover { 
    width: 400px; 
    height: 400px; 
}

來源

2013-01-03 04:00:09

This可能是這樣的你想找的。

來源

2013-01-03 04:00:28

此鏈接將幫助您 http://www.jacklmoore.com/zoom

放大追加的HTML被分配到裏面的元素，使元素必須能夠接受HTML，像<a>，<span>，<li>，<div>等，這排除<img>元素（見下文）。

$(document).ready(function(){ 
     $('a.photo').zoom({url: 'photo-big.jpg'}); 
    }); 

    // Using ColorBox with Zoom 
    $(document).ready(function(){ 
     $('a.photo').zoom({ 
      url: 'photo-big.jpg', 
      callback: function(){ 
       $(this).colorbox({href: this.src}); 
      } 
     }); 

});

要使用img元素縮放，他們需要用另一個元素包裝。從JavaScript中讀取一些與佈局相關的CSS樣式（基於百分比的寬度和高度，設置爲自動的邊距等）是不可能的，因此，安全的做法是將此更改推遲到單個網站所有者。以下是在某些情況下需要的全部內容：

$(document).ready(function(){ 
    $('img') 
     .wrap('<span style="display:inline-block"></span>') 
     .css('display', 'block') 
     .parent() 
     .zoom(); 
});

來源

2013-01-03 04:04:52 Nandu

當然可以！ css3的transform: scale()屬性與css3轉換一起使用非常簡單。

.thumbnail:hover img { 
    transform: scale(1.15); 
    -o-transform: scale(1.15); 
    -ms-transform: scale(1.15); 
    -moz-transform: scale(1.15); 
    -webkit-transform: scale(1.15); 
}

JSFiddle

來源

2013-01-03 04:13:07

用戶將鼠標懸停在圖像上時，如何獲得圖像的縮放效果？

回答

相關問題