2017-02-20 2 views
0

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

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

+1

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

答えて

1

今すぐ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> 
+1

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

+1

@CRoverあなたの歓迎:) –

0

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

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>

+1

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

+1

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

0

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

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>widthheighttopleftプロパティを操作持っている:それは要素にいくつかのCSSを与え伴うだろう。

関連する問題