热文一本正经

网页并排多个二维码的细节处理

多个二维码的处理

网站上做活动或多渠道推广可能会在底部添加多个二维码,这点本来无可厚非,但如果不处理的话,扫码的时候会同时扫到多个码,体验很不好,这里提供一种处理的思路:鼠标经过隐藏当前二维码。

具体的方法就是给经过的div或img加个

opacity: 0;

当前页面上有两个二维码的时候,鼠标经过其中一个,再扫码就不会出现同时扫到两个的情况了。

示例:https://www.mengniunet.com 网页右下角两个二维码的实现效果。

把这个方法再扩展一下:鼠标经过时隐藏当前和之后的,只显示鼠标前一个。

这样页面上有多个二维码的时候同样适用。

比如并排三个二维码,鼠标经过第一个时,隐藏第一个和第二个,只显示第三个。

实现的方法可以用jq,也可以在div上加onmouseover和onmouseout,用CSS也可以,但必须是同级或子级元素。

其他方法的探讨

1.鼠标经过隐藏其他的

这个方法最简单,但鼠标可能会挡住部分二维码,特别是改过鼠标主题的用户,影响扫码效果。

2.隐藏方式使用display:none;

这个是最常用的一种方式,实际使用的时候,会出现一个情况,就是鼠标放上去之后,二维码会不停的闪。原因是鼠标经过,执行display:none;隐藏之后,就不存在鼠标经过了,又会显示,如此反复。

非特殊说明,本博所有文章均为博主原创,并遵循 CC-BY-NC-SA 4.0 协议许可。
转载前请务必署名,本文链接:https://www.geniusxiaoshuai.com/exp/73.html
-- 展开阅读全文 --
ESET Mobile Security 激活码(两个月)
« 上一篇 06-13
EditPlus配色方案——Monokai风格
下一篇 » 02-14

发表评论

作者信息

热门文章

标签TAG

热评文章