页面浮动当前Url二维码

最新推荐文章于 2024-06-05 16:13:43 发布

原创最新推荐文章于 2024-06-05 16:13:43 发布 · 941 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#二维码

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在网页右下角实现一个浮动的当前URL二维码，提供一种便捷的分享方式。通过结合二维码生成技术与CSS浮动定位，让二维码始终显示在页面的底部角落，方便用户扫描。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

右下角浮动二维码

//函数
//config.width  二维宽度
//config.height  二维高度
//maxScreen 当屏幕宽度小于这个值时 不显示 二维码。
function qrcodeFloat(config){
    if(config==null){config={};}
    if(config.width==null){config.width=100;config.height=100;}
    if(config.height==null){config.height=100;}
    if(config.maxScreen==null){config.maxScreen=1000;}
    if(config.message==null){config.message="扫码手机访问";}
    //qrcode
    document.write('<script src="http://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js" ><\/script>');
    document.write('<style type="text/css">#qrocdeContainer{position: fixed;z-index: 999;bottom: 0;left: 0;width: 100%;width:100%;}#qrcodeMessage{background:#fff;width:'+config.width+'px;padding:8px;text-align:center;float:right;}@media screen and (max-width: '+config.maxScreen+'px) {#qrocdeContainer{display:none;}}</style>')
    document.write('<div id="qrocdeContainer"><div id="qrcodeMessage"><div id="qrcode"></div><div>'+config.message+'</div></div></div>')
    $(function(){var content=document.location.href;   jQuery('#qrcode').qrcode({width:config.width,height:config.height,correctLevel:0,text:content});});
}

//调用方法：
qrcodeFloat({width:120,height:120});

效果图：
这里写图片描述