国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

JavaScript - 実裝方法 Webページ上の畫(huà)像をクリック後、畫(huà)像が選択されチェックマークが表示されます
大家講道理
大家講道理 2017-05-16 13:03:40
0
5
1424

まず、フォト アルバムの HTML を貼り付けます

<p class="main-body">
<ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-border" data-am-gallery ="{ }" id="uldata">
<ボリスト名="imgdata" id="imgdata">

  • ;
<p class="am-gallery-item" id="{$imgdata.id}">
<a href="{$url}{$imgdata.image}">
<img class="imgyes" src="{$url}{$imgdata.image}" alt="{$imgdata.note}" id="imgid{$imgdata.id}" style="width: 245px;高さ: 147px"/>
<h3 class="am-gallery-title">{$imgdata.name}</h3>
<p class="am-gallery-desc">{$imgdata.time|date='Y-m-d H:i:s',###}
</p>
</a>
</p>
</li>
</ボリスト>
</ul>

    • いくつかの説明: 上記のコードでは、<ul> (id は imgdata) はフロントエンド フレームワークの仕様であり、無(wú)視できます。
    <volist> はバックエンドによる出力に使用されますが、無(wú)視することもできます。 {$imgdata.name} はバックエンドでも使用されます。

    アルバムの寫(xiě)真:

    対応する畫(huà)像をクリックしてボックスをチェックすることで実現(xiàn)したい WeChat 効果のタイプ:

    私の現(xiàn)在の一般的なアイデアは、CSS でチェックの HTML 効果を記述することです。対応する畫(huà)像をクリックした後、js を介してクラスを追加してチェック効果を?qū)g現(xiàn)します (チェックできるのは 1 つだけです)。
    私の CSS の知識(shí)は比較的淺いので、より良い実裝アイデアや、対応する CSS および jQuery コードを得ることができればと考えています。

    実際、畫(huà)像フックを?qū)g裝する CSS コードがもっと増えることを願(yuàn)っています。

    とにかく、ありがとう。

    大家講道理
    大家講道理

    光陰似箭催人老，日月如移越少年。

    全員に返信(5)
    僅有的幸福

    https://codepen.io/zengkan070...
    これは簡(jiǎn)単に書(shū)いたデモです。原則は、チェック マークを表す別の要素を畫(huà)像上に設(shè)定することです。クリックして表示と非表示を制御します。

    小葫蘆

    まず、.ok，負(fù)責(zé)鉤號(hào)的位置
    然后再給所有的 am-gallery-item 類(lèi)添加點(diǎn)擊事件
    當(dāng)點(diǎn)擊該類(lèi)的時(shí)候給該元素添加 .ok class

    などの CSS クラスを作成します。

    どの要素が選択されているかを知りたい場(chǎng)合は、.okclass

    を使用してすべての要素を取得してください
    滿(mǎn)天的星座

    選択レイヤーはカスタマイズされた効果で寫(xiě)真の上に覆われ、デフォルトでは非表示になります
    寫(xiě)真が選択されているかどうかにかかわらず、選択レイヤーはブール配列にバインドされます
    寫(xiě)真をクリックすると、配列の対応するオブジェクトが反転されます。オーバーレイにバインドされています ;
    少し大雑把なアイデアですが、回答者に役立つかどうかはわかりません。おそらく既製のコンポーネントがあるため、車(chē)輪を再発明する必要はありません。

    洪濤

    html+cssだけで思い通りのカチカチ操作が実現(xiàn)できます。

    構(gòu)造體は次のように使用できます:<label><input checkbox><p>

    チェックボックスは非表示で、選択されているかどうかをマークするために使用されます。
    その後ろの p はチェックマークとして使用され、:checked と兄弟セレクター '+' はチェックボックスを表示するかどうかを決定するために使用されます。畫(huà)像をラベルの背景に配置できるため、次のようなメリットがあります

    1. lazyload 効果と同様、ページャーの背後にある畫(huà)像は使用された後にのみ要求されるのと同様です。

    2. background-size: を含むと畫(huà)像を完全に表示できます

    大家講道理

    <p style="background-image:...;width:..,height:.."><p class="mask"></p></p>
    作成してみよう2 層構(gòu)造では、最も外側(cè)の p 背景畫(huà)像は別の背景畫(huà)像に設(shè)定され、p は高さと幅 100% で內(nèi)側(cè)の層に配置されます。これはマスキング効果に使用され、デフォルトでは非表示になります。外側(cè)の p をクリックすると、內(nèi)側(cè)の層の p 表示を js で設(shè)定した場(chǎng)合と同様の効果が発生します。

    最新のダウンロード
    詳細(xì)>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート