HTML CSS Javascript完成浮动登录窗口和窗口移动

来源：互联网发布：淘宝客户端编辑：程序博客网时间：2024/05/22 07:06

【源码下载】（百度网盘）

【源码下载】（爱问知识人）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>测试登录</title><link href="css/login.css" rel="stylesheet" /><script src="js/jquery-1.8.3.min.js" type="text/javascript"></script><script src="js/login.js" type="text/javascript"></script></head><body><div id="opacityDiv"> </div><div id="divParent">            <div id="div0"><a href="#">登录</a></div>        <div>你好！</div>    </div>    <div id="div1">    <div id="close"><span>×</span></div>        <div><label>用户名</label><input id="user" align="left" width="20px"/></div>        <div><label>密码：</label><input type="password" width="20px" /></div>        <div><input type="submit" id="loginbt" value="登录" /><input type="reset" id="cancle" value="取消" /></div>    </div>    <!-- 由静寞小森http://blog.sina.com.cn/u/1586802947 奉献给大家，希望大家交流 --></body></html>

// JavaScript Document$(document).ready(function() {$("body").css({height:$(window).height()-50,width:$(window).width()-50});var left_margin = ($("body").width() - $("#div1").width()) / 2;var top_margin = ($("body").height() - $("#div1").height()) / 2;var left_padding;var top_padding;var draggingBool = false;//alert("height"+width+";;width:"+height);    $("#div0").click(function(){//$("#div0").hide();$("#div1").show(500);//$("#div1").css({"margin-top":height,"margin-left":width});$("#div1").offset({top:top_margin,left:left_margin});$("#opacityDiv").offset({top:0,left:0});$("#opacityDiv").css({height:$(window).height(),width:$(window).width()});$("#opacityDiv").css({opacity:0.4});$("#opacityDiv").show(500);});$("#close span").click(function(){$("#div1").hide(500);$("#opacityDiv").hide(500);});//拖动登录窗口的效果$("#close").mousedown(function(e){draggingBool = true;left_padding = e.clientX - $("#div1").offset().left;top_padding = e.clientY - $("#div1").offset().top;//alert("left:"+left_margin+"\\"+"top:"+top_margin);$("#div1").css({opacity:0.2});});$(document).mouseup(function(){draggingBool = false;$("#div1").css({opacity:1.0});});$(document).mousemove(function(e){if(!draggingBool)           return;var x = e.clientX - left_padding;var y = e.clientY - top_padding;//alert(x+"^^^^^"+y);$("#div1").css({top:y,left:x});});});

@charset "utf-8";/* CSS Document */body{text-align:center;}#divParent{width:980px;}#div1{position:absolute;display:none;height:100px;width:250px;background-color:#9F9;border:outset #06C 1px;z-index:1001;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;}#opacityDiv{display:none;z-index:100;position:absolute; /* Firefox 3.6 */  background-image: -moz-linear-gradient(top, #00F, #F00);  /* Safari & Chrome */  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #00F),color-stop(1, #F00));   /* IE6 & IE7 */  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00F', endColorstr='#F00');  /* IE8 */  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00F', endColorstr='#F00')"; }#cancle{margin-left:50px;}#close{text-align:right;height:15px;padding-right:1px;cursor:move;}#close span{cursor:default;}