好资源导航 » 文章资讯 » jQuery实现鼠标拖拽登录框移动效果

jQuery实现鼠标拖拽登录框移动效果

2023-07-16 19:19:03 139

本文实例为大家分享了jQuery鼠标拖拽登录框移动的具体代码，供大家参考，具体内容如下

1.jQuery代码



$(function(){
//点击登录跳转
$("a").click(function(){
$("#bg,#login").css("display","block");
})
//定义变量
var$mX;
var$mY;
var$move=false;//true是可以移动登录框
//鼠标按下事件
$("#login").mousedown(function(event){
$(this).css("opacity",0.5);//改变透明度
$move=true;
//得到鼠标与登录框原点之间的距离
$mX=event.pageX-parseInt($(this).css("left"));
$mY=event.pageY-parseInt($(this).css("top"));
})
//鼠标移动事件
$("#login").mousemove(function(event){
if($move){
//得到登录框要移动的量
$(this).css("left",(event.pageX-$mX)+"px")
$(this).css("top",(event.pageY-$mY)+"px")
}
}).mouseup(function(){
//鼠标弹起事件
$move=false;
$(this).css("opacity",1);
})
})

2.css


*{
margin:0;
padding:0;
}
h3{
display:block;
width:300px;
height:50px;
text-align:center;
line-height:50px;
background-color:#0076A9;
}
#login{
width:300px;
height:200px;
margin:0auto;
position:absolute;
top:250px;
left:500px;
border:1pxsolid#000000;
background-color:#FFFFFF;
cursor:move;
display:none;
}
table{
position:absolute;
top:50px;
left:0;
width:100%;
height:150px;
text-align:center;
}
tr,td{
border:none;
}
tr{
height:50px;
}
td{
padding:05px05px;
}
#bg{
width:100%;
height:100%;
background-color:#999999;
position:absolute;
top:0;
left:0;
display:none;
}
body{
width:100%;
height:600px;
}

3.HTML





登录界面



登录

欢迎登录！

用户名：密码：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现鼠标拖拽登录框移动效果

欢迎登录！

热门推荐

随机推荐