jq view プレビュー画像の共有例-jsチュートリアル-php.cn

jq view プレビュー画像の共有例

小云云

リリース： 2018-03-17 10:58:40

オリジナル

1250 人が閲覧しました

サムネイルの上にマウスを移動すると、大きな画像が表示され、大きな画像がマウスの動きに追従するか、プロンプトテキストの上にマウスを移動すると画像が表示されます。具体的には、サムネイルがページの左半分にある場合はマウスの右側に大きな画像が表示され、サムネイルがページの右半分にある場合はプレビューが表示されます。大きな画像はマウスの左側に表示されます。

アイデア分析

html構造

<a href="xx.jpg">缩略图</a>

ログイン後にコピー

マウスがそれを覆ったときにプレビュー画像アドレスを取得します<a></a>
プレビュー画像構造

<p id=&#39;preview&#39;><p>
<img src=&#39;"+$(this).attr(&#39;href&#39;)+"&#39; />
<p>"+$(this).attr(&#39;title&#39;)+"</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 サイトの他の関連記事を参照してください。