随便撸(www.suibianlu.com)精品网站源码,织梦建站模版,游戏源代码分享平台
当前位置:网站首页js特效名站特效 正文

jQuery点击弹出仿百度登录窗口代码

时间:2019-04-24[名站特效]作者:木子10086

jQuery点击弹出仿百度登录窗口代码 第1张

个类似百度登录弹出窗口带背景遮罩效果的jQuery弹出层代码,点击弹出登录窗口代码后,可以用鼠标拖动该窗口,右上角关闭。


JS代码:


<script type=&quot;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>


<script type="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>



本文标签:

转载请注明来源:jQuery点击弹出仿百度登录窗口代码

本文永久链接地址:https://www.suibianlu.com/14033.html

郑重声明:
本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。
若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
如无法链接失效或侵犯版权,请给我们来信:admin#suibianlu.com

Top