當鼠標懸停在大圖中時，放大圖像上的區域

Question

我處於無形狀或形成編碼器，但對我的BigCartel網站進行了一些調整，預計這些網站將在未來幾周內推出。我有一條服裝線，我希望能夠選擇產品的啓用消費者能夠將鼠標懸停在產品圖像上以查看其放大...（以下是耐克公司的示例：我的意思是：http://store.nike.com/us/en_us/pd/breathe-womens-short-sleeve-running-top/pid-11319700/pgid-11619220）I想知道使用什麼代碼來製作消費者點擊的圖像/產品，並在某個區域懸停時查看大圖/放大圖...我上傳了一些代碼，但由於我不是專業編碼員，因此我想知道在哪裏插入它的自定義編碼。我有一個CSS選項，HTML和我不知道我是否應該去「產品」或所有編碼...（對不起，菜鳥問題）...

我也想知道（如果我可以在這裏滑動這個問題）如何加快我的BigCartel網站上幻燈片放映的速度，甚至可能將其更改爲解散選項......並且，我將在何處插入該代碼..

我已經對自己做了一些小的改變，但是再次，我沒有CODER，並且還有一些額外的調整，我很樂意使我的網站沒有如此「餅乾刀」BigCartel的好人，發給我這個鏈接去搜索並提出問題。非常感謝您的幫助！

Answer 1

您是否嘗試過這個這個總是對我的作品https://codepen.io/ccrch/pen/yyaraz

JS

$('.tile') 
    // tile mouse actions 
    .on('mouseover', function(){ 
     $(this).children('.photo').css({'transform': 'scale('+ $(this).attr('data-scale') +')'}); 
    }) 
    .on('mouseout', function(){ 
     $(this).children('.photo').css({'transform': 'scale(1)'}); 
    }) 
    .on('mousemove', function(e){ 
     $(this).children('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left)/$(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top)/$(this).height()) * 100 +'%'}); 
    }) 
    // tiles set up 
    .each(function(){ 
     $(this) 
     // add a photo container 
     .append('<div class="photo"></div>') 
     // some text just to show zoom level on current item in this example 
     .append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>ZOOM ON<br>HOVER</div>') 
     // set up a background image for each tile based on data-image attribute 
     .children('.photo').css({'background-image': 'url('+ $(this).attr('data-image') +')'}); 
    }) 

HTML

<div class="tiles"> 
    <div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div> 
    <div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div> 
    <div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div> 
    </div> 

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700); 

    body { 
    background: #fff; 
    color: #000; 
    margin: 0; 
    } 

    .tiles { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    } 

    .tile { 
    position: relative; 
    float: left; 
    width: 33.333%; 
    height: 100%; 
    overflow: hidden; 
    } 

    .photo { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    transition: transform .5s ease-out; 
    } 

    .txt { 
    position: absolute; 
    z-index: 2; 
    right: 0; 
    bottom: 10%; 
    left: 0; 
    font-family: 'Roboto Slab', serif; 
    font-size: 9px; 
    line-height: 12px; 
    text-align: center; 
    cursor: default; 
    } 

    .x { 
    font-size: 32px; 
    line-height: 32px; 
    }