1

マウスオーバーで円のようなレンズを表示しようとしています。私はいくつかのコーディングを行いましたが、まだ完璧な結果には達していません。これを行う方法を知っている人はいますか？ここに私のコード//htmlがあります

<div class="thumbnails">
    <div class="thumbnail">
    <img src="http://www.niams.nih.gov/health_info/Sprains_Strains/images/Fig3_Thumb.gif" />
</div>
<div class="thumbnail">
    <img src="http://www.niams.nih.gov/health_info/Sprains_Strains/images/Fig3_Thumb.gif" />
</div>
<div class="thumbnail">
    <img src="http://www.niams.nih.gov/health_info/Sprains_Strains/images/Fig3_Thumb.gif" />
</div>
</div>

//CSS

.thumbnails {
    padding: 35px;
}
.thumbnail {
    float:left;
    position:relative;
    width: 70px;
    margin-right: 10px;
}
.thumbnail img{
    /* ... */
    width:70px;
    height:50px;
}    

.thumbnail:hover img {
    position:relative;
    top:-25px;
    left:-35px;
    width:140px;
    height:140px;
    display:block;
    z-index:999;
    border-radius:75px;
    border:5px solid gray;
}

これが私のフィドルコードです

4

3 に答える 3

4

グラデーションまたは画像でオーバーレイする必要があります。実際の例については、このフィドルを参照してください: http://jsfiddle.net/V4YaQ/119/

基本的に、画像をラップしてオーバーレイを追加しました。

<div class="thumbnail">
   <div class="image-container">
      <div class="overlay">&nbsp;</div>
      <img src="http://cdn1.bigcommerce.com/server4800/10d13/products/1134/images/4290/pw72_1__15735.1346792984.320.320.jpg" />
   </div>          
</div>

次にCSSでこれを行いました：

.thumbnail:hover .image-container {
  position:relative;    
  top:-25px;
  left:-35px;
  width:140px;
  height:140px;    
  z-index:999;    
  border-radius:75px;
  border:1px solid white;  
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.thumbnail:hover img {
  position:relative;
  width:140px;
  height:140px;
  display:block;
}

.thumbnail .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(at 25% 25%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.0) 35%, rgba(0, 0, 0, 0.5) 100%);
  display: none;
}

.thumbnail:hover .overlay {
  display: block;  
  z-index: 1000;
}

お気づきのように、効果のために境界線を変更し、ドロップ シャドウも追加しました。

于 2013-09-30T14:20:52.913 に答える
3

「拡大鏡」効果を実現するには、この 2 つのコードペンのいずれかに従います。

http://codepen.io/bekerov/pen/kgyvL

http://codepen.io/TheHeat/pen/gdxFG

または、マウス効果が必要ない場合は、「ガラス」効果のフィドルを次に示します。

http://jsfiddle.net/V4YaQ/121/

効果はボックス シャドウのみで行われます。

box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
于 2013-09-30T14:28:20.480 に答える
2

確実なこと。私は一年前にこのようなことをしました。正直なところ、私はそのプロセスを本当に楽しんでいました。エッジからデータを取得する方法が原因で、画像のエッジが処理される方法にはまだ問題があります。canvas 要素はブラウザによって実装が異なり、結果も異なります。クライアントはこの種のソリューションを望まなかったため、開発は中止されました。

ここに画像の説明を入力

ここにライブデモがあります: http://jsfiddle.net/enhzflep/xsEVb/

テキストをコピーすることで、svg リソースを抽出できます。

var svgBase64Str = xxxxxxxxxxxxxx

オンラインツールでエンコードを解除します。そこにも作成するために従ったチュートリアルのメモがあります。

更新編集: 何年も前に、テクスチャの上に浮かぶ虫眼鏡をシミュレートするコードを見たことを思い出しました。主な違いは、マググラスが湾曲しているため、その表面全体でさまざまな程度の画像の変位があることです。最初の画像は一定の倍率を示しているだけで、平行線は平行のままです。

先日、より本格的なレンズ効果のコードを見つけました。正確な物理モデルではなく、表示面と交差するガラス球を想定しているため、まだ理想的ではありません。各ピクセルの変位を計算するために使用される式を変更することはそれほど難しくありません。これは、lens_mag と lens_width という 2 つの変数を操作するときに、多少の追加の検討が必要になるとしても、私には十分に機能します。

ここに画像の説明を入力

ここでコードを見つけることができます: http://jsfiddle.net/enhzflep/Ytq2M/

これは、次のアーカイブにある LENS コードのポートに由来します: http://internode.dl.sourceforge.net/project/demo-effects/The_Demo_Effects_Collection/0.7.2/The_Demo_Effects_Collection-0.7.2.tar.gz

このページで見つけたもの: http://demo-effects.sourceforge.net/

于 2013-09-30T14:41:39.020 に答える