jQuery DIV弹窗拖动、调用了一个DOMWindow.js文件、想实现弹出的拖动效果、急！~~~
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/l...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 弹窗7 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"></script>
<script src="jQueryDOMWindow.js"></script>
</head>
<body>
<p>
<a href="#inlineContent" class="defaultDOMWindow">Open DOM Window</a>
</p>
<script type="text/javascript">
$(document).ready(function(){
$('.defaultDOMWindow').openDOMWindow({
eventType:'click',
loader:1,
loaderImagePath:'animationProcessing.gif',
loaderHeight:16,
loaderWidth:17
});
})
</script>
<div id="inlineContent" style=" display:none;">
<p>
Inline Content
</p>
<p>
Click overlay to close window
</p>
<p>
Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi. Erat delenit laoreet quinta videntur id. Ii at qui eum ut usus. Quis etiam suscipit iusto elit dolor. Dolor congue eodem adipiscing cum placerat.
</p>
<p>
Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem.
</p>
<p>
Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem.
</p>
<p>
Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem.
</p>
</div>
</body>
</html> 展开
<html>
<head>
<title> 弹窗7 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"></script>
<script src="jQueryDOMWindow.js"></script>
</head>
<body>
<p>
<a href="#inlineContent" class="defaultDOMWindow">Open DOM Window</a>
</p>
<script type="text/javascript">
$(document).ready(function(){
$('.defaultDOMWindow').openDOMWindow({
eventType:'click',
loader:1,
loaderImagePath:'animationProcessing.gif',
loaderHeight:16,
loaderWidth:17
});
})
</script>
<div id="inlineContent" style=" display:none;">
<p>
Inline Content
</p>
<p>
Click overlay to close window
</p>
<p>
Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi. Erat delenit laoreet quinta videntur id. Ii at qui eum ut usus. Quis etiam suscipit iusto elit dolor. Dolor congue eodem adipiscing cum placerat.
</p>
<p>
Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem.
</p>
<p>
Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem.
</p>
<p>
Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem.
</p>
</div>
</body>
</html> 展开
1个回答
展开全部
<html>
<head>
<title>jQuery实现DIV层拖动效果</title>
<style type="text/css">
#div2
{
position:absolute;
width:335px;
height:80px;
background-color:#777788;
cursor:move;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function(){
$("#div2").mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($("#div2").css("left"));
_y=e.pageY-parseInt($("#div2").css("top"));
$("#div2").fadeTo(20, 0.25);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$("#div2").css({"top":y,"left":x});//控件新位置
}
}).mouseup(function(){
_move=false;
$("#div2").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
<div id="div2">拖拽</div>
</body>
</html>
自己看看，看懂了自己修改代码，改成自己的
<head>
<title>jQuery实现DIV层拖动效果</title>
<style type="text/css">
#div2
{
position:absolute;
width:335px;
height:80px;
background-color:#777788;
cursor:move;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function(){
$("#div2").mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($("#div2").css("left"));
_y=e.pageY-parseInt($("#div2").css("top"));
$("#div2").fadeTo(20, 0.25);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$("#div2").css({"top":y,"left":x});//控件新位置
}
}).mouseup(function(){
_move=false;
$("#div2").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
<div id="div2">拖拽</div>
</body>
</html>
自己看看，看懂了自己修改代码，改成自己的
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
