ホームページ > 記事 > ウェブフロントエンド > jq view プレビュー画像の共有例
jq view プレビュー画像の共有例
- 小云云オリジナル
- 2018-03-17 10:58:401309ブラウズ
サムネイルの上にマウスを移動すると、大きな画像が表示され、大きな画像がマウスの動きに追従するか、プロンプトテキストの上にマウスを移動すると画像が表示されます。具体的には、サムネイルがページの左半分にある場合はマウスの右側に大きな画像が表示され、サムネイルがページの右半分にある場合はプレビューが表示されます。大きな画像はマウスの左側に表示されます。
アイデア分析
html構造
<a href="xx.jpg">缩略图</a>
マウスがそれを覆ったときにプレビュー画像アドレスを取得します3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed
プレビュー画像構造
<p id='preview'><p> <img src='"+$(this).attr('href')+"' /> <p>"+$(this).attr('title')+"</p></p></p>
本文に追加して絶対配置を使用します
- プラグイン開発
プラグイン開発モデルを試してみたかったのでこんな感じで書きました
$.fn.preview=function(){
......
}jQuery.fn = jQuery.prototype プロトタイプ
あらゆるjqオブジェクトが使用可能
ソースコード
<style>.imgbox{ margin-top: 150px; text-align: center;}.imgbox img { display: inline-block; width: 250px; height: 144px;}</style><script>
$(function(){
$("a.preview").preview(); //页面加载完后执行
});</script><body>
<p class="page">
<p class="imgbox">
<a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>
<a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>
<a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>
<a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>
<a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple">查看</a>
</p>
</p></body>jquery-imgpreview.js
リーリー以上がjq view プレビュー画像の共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。