如何使用Elevatezoom懸停縮放圖像而不使用大或小圖像/單張圖像

我有一個項目，他們只使用唱歌。但圖像質量很高。我想要使用升降變焦或任何類似的縮放此圖像，只需使用這一個圖像。下面是放大的一個簡單的用戶界面如何使用Elevatezoom懸停縮放圖像而不使用大或小圖像/單張圖像

<script src='jquery-1.8.3.min.js'></script> 
    <script src='jquery.elevatezoom.js'></script> 
<script> 
    $("#zoom_01").elevateZoom({ 
    zoomType    : "lens", 
    lensShape : "round", 
    lensSize : 200 
});

來源

2016-10-20 Jeeva

我可以問你爲什麼你要避免使用2個圖像？這是爲了獲得更好的性能，還是僅僅爲了佈局/顯示？ –

這是因爲在我的項目中有很多上傳發生，它只是保存爲HQ的單個圖像。因此，如果我要使用2張圖像，我還需要進行一些深層次的更改 – Jeeva

代碼在哪裏？分享您迄今爲止所做的工作代碼或代碼。正確的代碼。不要只是來這裏問問題沒有代碼。 – JeetDaloneboy

你可以試試這個方法。

的HTML

<div class="thumb-holder"> 
    <img class="thumbnail" src="https://www.guthriegreen.com/sites/default/files/Kung-Fu-Panda-6%5B1%5D.jpg"> 
</div>

的CSS

.thumb-holder{ 
    border:4px solid #ff07ee; 
    padding:0; 
    width:400px; 
    height:auto; 
    position:relative; 
    margin:15% auto; 
    display: block; 
    overflow: hidden; 
    .thumbnail{ 
    float:left; 
    width:100%; 
    height:auto; 
    } 
} 
.thumb-zoom{ 
    position: absolute; 
    background-repeat:no-repeat; 
    width:100px; 
    height:100px; 
    border-radius:100%; 
    box-shadow:inset 0 0 10px rgba(0,0,0,0.5); 
    border:4px solid #141414; 
    top:0; 
    overflow: hidden; 
    cursor:none; 
    #zoom-img{ 
    width:500px; 
    height:auto; 
    position: absolute; 
    } 
}

的JS

$(".thumb-holder").append('<div class="thumb-zoom"></div>') 

$(".thumb-holder").mousemove(function(event) { 

    var offset = $(this).offset(); 
    var zoomX = event.pageX - offset.left - 50 ; 
    var zoomY = event.pageY - offset.top - 50; 



    $('.thumb-zoom').css({ 
    'left' :zoomX, 
    'top': zoomY, 
    }) 

    var position = $(".thumb-zoom").position(); 
    var image = $(".thumbnail").attr('src'); 

    $('.thumb-zoom').html('<img id="zoom-img" src="'+ image +'" >'); 

    $("#zoom-img").css({ 
     'left' : -zoomX - 50 , 
     'top': -zoomY - 50, 
    }) 

});

結果

演示

Codepen：ElevateZoom Lens Effect on hover using one image with JS and CSS

來源

2016-10-20 05:00:46

我無法理解html部分的代碼 – Jeeva

@Jeeva以下是完整的代碼和演示。乾杯! –

@Jeeva你打算看看這個嗎？ –

如何使用Elevatezoom懸停縮放圖像而不使用大或小圖像/單張圖像

回答

相關問題