首先,先贴这是相册的HTML
说明一些:上面代码中,
相册图片:
想实现的类型微信的点击相应图片并打钩的效果:
我现在大概的思路是在CSS中写打钩的HTML效果。点击相应图片之后通过js添加Class实现打钩的效果(只能打钩一个)。
因为我CSS知识比较薄弱,现在希望能有更好的实现思路或者是相应CSS与jQuery代码。
其实更多希望能有实现图片打钩的CSS代码。
无论如何,感谢了。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
https://codepen.io/zengkan070...
这是简单写的一个 demo。原理就是:在图片上面设置一个单独的元素,用来表示对号。通过点击来控制它的显示隐藏。
首先写一个css类,例如
.ok,负责钩号的位置然后再给所有的
am-gallery-item类添加点击事件当点击该类的时候给该元素添加
.ok类如果你想知道哪些元素被选中,只需要获取所有拥有
.ok类的元素即可照片上方覆盖一层选中层,效果自定义,默认隐藏;
照片选中与否,绑定到一个布尔值数组中;
照片点击后,数组对应的对象取反操作并绑定到覆盖层上;
一点粗浅的思路,不知道能否帮到答主,也许有现成组件,不需要重复造轮子。
你要的打勾操作,可以仅用 html+css 实现。
结构可以用:<label><input checkbox><p>
checkbox 隐藏,用来标记是否选中;
后面的 p 做打勾图,用 :checked 和 兄弟选择器 '+' 判断是否显示;
label 修饰checkbox, 图片可以放到 label 的背景中,好处有
类似lazyload 效果,像分页器后面的图用到才请求;
background-size: contain 可以使图片完整显示;
<p style="background-image:...;width:..,height:.."><p class="mask"></p></p>
做一个两层的结构,最外层的p背景图片设置为不同的背景图,里层放一个p,高度宽度100%,用来做遮罩效果,默认隐藏。当点击外层p时,通过js设置里层的p显示,就出现了类似的效果。