首先,先貼這是相冊(cè)的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-bordered" data-am-gallery ="{ }" id="uldata">
<volist name="imgdata" id="imgdata">
<li>
<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;height: 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>
</volist>
</ul>
說明一些:上面代碼中,<ul>(id是imgdata)內(nèi)是前端框架的規(guī)范,可以無視。
<volist>是后端用于輸出的,也可以無視。{$imgdata.name}也是后端中使用的。
相冊(cè)圖片:
想實(shí)現(xiàn)的類型微信的點(diǎn)擊相應(yīng)圖片并打鉤的效果:
我現(xiàn)在大概的思路是在CSS中寫打鉤的HTML效果。點(diǎn)擊相應(yīng)圖片之后通過js添加Class實(shí)現(xiàn)打鉤的效果(只能打鉤一個(gè))。
因?yàn)槲褻SS知識(shí)比較薄弱,現(xiàn)在希望能有更好的實(shí)現(xiàn)思路或者是相應(yīng)CSS與jQuery代碼。
其實(shí)更多希望能有實(shí)現(xiàn)圖片打鉤的CSS代碼。
無論如何,感謝了。
光陰似箭催人老,日月如移越少年。
https://codepen.io/zengkan070...
這是簡單寫的一個(gè) demo。原理就是:在圖片上面設(shè)置一個(gè)單獨(dú)的元素,用來表示對(duì)號(hào)。通過點(diǎn)擊來控制它的顯示隱藏。
首先寫一個(gè)css類,例如 .ok
,負(fù)責(zé)鉤號(hào)的位置
然后再給所有的 am-gallery-item
類添加點(diǎn)擊事件
當(dāng)點(diǎn)擊該類的時(shí)候給該元素添加 .ok
類
如果你想知道哪些元素被選中,只需要獲取所有擁有.ok
類的元素即可
照片上方覆蓋一層選中層,效果自定義,默認(rèn)隱藏;
照片選中與否,綁定到一個(gè)布爾值數(shù)組中;
照片點(diǎn)擊后,數(shù)組對(duì)應(yīng)的對(duì)象取反操作并綁定到覆蓋層上;
一點(diǎn)粗淺的思路,不知道能否幫到答主,也許有現(xiàn)成組件,不需要重復(fù)造輪子。
你要的打勾操作,可以僅用 html+css 實(shí)現(xiàn)。
結(jié)構(gòu)可以用:<label><input checkbox><p>
checkbox 隱藏,用來標(biāo)記是否選中;
后面的 p 做打勾圖,用 :checked 和 兄弟選擇器 '+' 判斷是否顯示;
label 修飾checkbox, 圖片可以放到 label 的背景中,好處有
類似lazyload 效果,像分頁器后面的圖用到才請(qǐng)求;
background-size: contain 可以使圖片完整顯示;
<p style="background-image:...;width:..,height:.."><p class="mask"></p></p>
做一個(gè)兩層的結(jié)構(gòu),最外層的p背景圖片設(shè)置為不同的背景圖,里層放一個(gè)p,高度寬度100%,用來做遮罩效果,默認(rèn)隱藏。當(dāng)點(diǎn)擊外層p時(shí),通過js設(shè)置里層的p顯示,就出現(xiàn)了類似的效果。