背景画像付きのdivではなく、直接画像でこのズーム＆パン効果を実現できますか？

this画像のズームとパン効果を示すコードが見つかりました。私が知る限り、このコードはdata-image属性に基づいて各divに背景画像を割り当てて動作します。 div32の代わりに直接のタグでこれを行うことができる方法はありますか？背景画像付きのdivではなく、直接画像でこのズーム＆パン効果を実現できますか？

編集：これは私が話しているマークアップの一種です。 実際のimgタグを内部に持つコンテナdiv。

出典

2017-02-20 Anonymous

だから、あなたは、単に 'data'に基づいてJavaScriptでのマークアップを既存' 'タグに言及した効果を追加したり、作成したいです属性も？ – ppajer

今すぐCodePenを見てください。

は、私はあなたが望むようにそれがちょっと見えるようになったと考えて、それ

<div class="tiles"> 
    <div data-scale="1.1" class="product-single__photos tile" id="ProductPhoto">  
     <img class="photo" src="//cdn.shopify.com/s/files/1/1698/6183/products/bluza_dama_39377a_large.jpg?v=1487178925" alt="Last Skirt" id="ProductPhotoImg"> 
    </div> 
</div>

出典

2017-02-20 19:20:21

うん。私はこの後も私の答えを終わらせるつもりはない。 :) +1 – ppajer

@CRoverあなたの歓迎:) –

あなたは、画像位置絶対に

div{ 
 
    width:100%; 
 
    height:200px; 
 
    overflow:hidden; 
 
} 
 
img{ 
 
    width:100%; 
 
    margin:0%; 
 
    transition:0.5s; 
 
} 
 
img:hover{ 
 
    width:120%; 
 
    margin:-10; 
 
}

<div> 
 
    <img src="https://cdn.pixabay.com/photo/2015/07/06/13/58/arlberg-pass-833326_960_720.jpg"> 
 
</div>

出典

2017-02-20 19:13:13

リンクされた例は、画像をオフセットすることによってdiv内のマウスの動きに反応します。 – ppajer

javascriptとjqueryの基本を知っていれば、マウスの動きによって変更されたオフセットをマージンに置き換えることができます。私はちょうどそれがどのように動作するかのアイデアを伝えたいと思った –

を調整するために余裕を持って再生することができます。

div.product-single__photos { 
    position: relative; 
    overflow: hidden; 
} 
div.product-single__photos > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: auto; 
}

をさらにJavaScriptを<img>のwidth、height、topとleftプロパティを操作持っている：それは要素にいくつかのCSSを与え伴うだろう。

出典

2017-02-20 19:19:50 Gwellin

背景画像付きのdivではなく、直接画像でこのズーム＆パン効果を実現できますか？

答えて

関連する問題