码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript单击弹出窗口,可关闭可拖动的Div层窗

时间:2014-09-13 17:13:45      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   java   ar   2014   

<!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>石家庄有机肥  http://www.hbbaotian.com/</title>
<style>
#main{position: absolute;top: 10%;left: 10%;}
#title{width: 500px;height: 19px;border-top: #85ABE4 1px solid;border-right: #222 1px solid;border-left: #85ABE4 1px solid;border-bottom: none;background: #5B8BD9;}
#content{border: #85ABE4 1px solid;border-top: none;width: 500px;height: 300px;}
#content img{width: 500px;height: 300px;}
#off{float: right;cursor: pointer;}
.none{display: none;}
.show{display: block;}
#open{background: #fff;border: #555 1px solid;height: 13px;width: 50px;position: absolute;left: 50px;top: 400px;cursor: pointer;}
#open marquee{font-size: 12px;color: #555;}
#img{background: url(http://www.jm880.cn/UploadFiles/2014-09/2/2014938501106677.jpg) no-repeat;float: right;width: 49px;height: 19px;}
#img: hover{background: url(http://www.jm880.cn/UploadFiles/2014-09/2/2014938457929389.jpg) no-repeat;}
#ten{float: left;width: 400px;}
</style>
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//设置标题栏
document.title="0.0 WINDOW";
//窗口的拖动
var bool=false;
var offsetX=0;
var offsetY=0;
$("#main").mousedown(function(){
bool=true;
offsetX = event.offsetX;
offsetY = event.offsetY;
$("#ten").css(cursor,move);
})
        .mouseup(function(){
            bool=false;
         })
        $(document).mousemove(function(e){
            if(!bool)
                return;
            var x = event.clientX-offsetX;
            var y = event.clientY-offsetY;
            $("#main").css("left", x);
            $("#main").css("top", y);
            })
//窗口的关闭
$("#img").click(function() {
$("#main").removeClass("show");
$("#main").addClass("none");
$("#open").addClass("show"); });
$("#open").click(function() {
$("#main").removeClass("none");
$("#main").addClass("show");
$("#open").removeClass("show");
$("#open").addClass("none");
});
});
</script>
</head>
<body>
<div id="main" class="show">
<div id="title">
<div id="ten"></div>
<div id="img" title="close"></div>
</div>
<div id="content">
</div>
</div>
<div id="open" class="none" title="">
<marquee>点击弹出窗口</marquee>
</div>
</body>
</html>

 

JavaScript单击弹出窗口,可关闭可拖动的Div层窗

标签:style   blog   http   color   io   os   java   ar   2014   

原文地址:http://www.cnblogs.com/youtianxia/p/3969971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!