【www.bbyears.com--微信】
用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。这用方式比较灵活方便。而现在扫描二维码登录的方式也是很常见，例如QQ、微信、百度等。现在何问起推荐一个带二维码的登录弹出层，可拖动、关闭，有需要的朋友可以参考一下。
效果图：
代码如下：
jQuery带二维码登录窗口弹出层特效 - 何问起
.tc{display: block;padding: 1em 1.5em;border: 3px solid #fff;font-weight: 700;margin: 50px auto;background:#1d7db1;color: #fff;}
.tc a:hover{opacity: 0.6;}
a{color:blue}
点击登录
用户登录
手机扫描
扫描二维码登录
短信快捷登录
遇到登录问题
立即注册
期待更多功能
<scriptsrc="http://down.hovertree.com/jquery/jquery-1.11.0.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
//窗口效果
//点击登录class为tc 显示
$(".tc").click(function(){
$("#gray").show();
$("#popup").show();//查找ID为popup的DIV show()显示#gray
tc_center();
});
//点击关闭按钮
$("a.guanbi").click(function(){
$("#gray").hide();
$("#popup").hide();//查找ID为popup的DIV hide()隐藏
})
//窗口水平居中
$(window).resize(function(){
tc_center();
});
function tc_center(){
var _top=($(window).height()-$(".popup").height())/2;
var _left=($(window).width()-$(".popup").width())/2;
$(".popup").css({top:_top,left:_left});
}
</script>
<scripttype="text/javascript">
$(document).ready(function(){
$(".top_nav").mousedown(function(e){
$(this).css("cursor","move");//改变鼠标指针的形状
var offset = $(this).offset();//DIV在页面的位置
var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
$(document).bind("mousemove",function(ev){ //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
$(".popup").stop();//加上这个之后
var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值
$(".popup").animate({left:_x+"px",top:_y+"px"},10);
});
});
$(document).mouseup(function() {
$(".popup").css("cursor","default");
$(this).unbind("mousemove");
});
})
</script>
适用多种浏览器，如火狐，Chrome，Edge等。
来源：何问起 说明