云凤蝶 这种鼠标经过显示二维码 是如何实现的

Question

云凤蝶 https://www.yunfengdie.com/ 案例展示中

鼠标进过 显示二维码 是如何实现的

大神请登场表演

谢谢

Answer 1

你是问二维码怎么生成吗？
百度qrcode.js
https://github.com/davidshimj...

var qrcode = new QRCode("test", {
    text: "http://www.runoob.com",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

Answer 2

这样的交互做法有很多。

类似案例的那种，hover上去，原本隐藏的子元素qrcode-div的opacity从0到1，就展现了。
建议楼主可以直接打开控制台，看看人家是怎么做的哈，跟踪一下相关元素的样式就好了。

其他能实现的方式：

一、默认渲染二维码的div

1. 默认样式opacity:0，hover的样式 opacity:1
2. 默认样式display:none，hover的样式 display: block

二、方块的div的内容，默认展示原来的内容（案例图片+描述），hover时把div的内容替换成二维码的模板（不过这种方式会反复修改dom节点）