有两个图片。需要的请留言！代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
.divNone{
300px;
background-color:#f90;
height:210px;
z-index:10;
position:absolute;
cursor:hand;
}
.divNone p{ margin:6px}
.roundtop {
background: url(images/tr.gif) no-repeat top right;
}
.roundbottom {
background: url(images/br.gif) no-repeat top right;
}
img.corner {
5px;
height: 5px;
border: none;
display: block;
}
.title{
float:right;
margin-top:5px;
margin-right:5px;
}
.closeCss{
color:#FFF;
}
.backgroundDiv{
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
opacity:0.3;
background-color:#bbb;
z-index:3;
}
</style>
<script language="javascript">
function MM_Tip(objDiv,w,h){
$(objDiv).style.top=(document.body.clientHeight-210)/2+"px";
$(objDiv).style.left=(document.body.clientWidth-300)/2+"px";
$(objDiv).style.display="block";
var iWidth = screen.width;
var iHeight = screen.height;
var bgObj = document.createElement("div");
bgObj.id="divBody";
bgObj.className="backgroundDiv";
bgObj.style.width=iWidth;
bgObj.style.height=iHeight;
document.body.appendChild(bgObj);
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
$(objDiv).onmousedown=function(){
moveable = true;
moveX = window.event.clientX;
moveY = window.event.clientY;
moveTop = parseInt($(objDiv).style.top);
moveLeft = parseInt($(objDiv).style.left);
document.onmousemove = function() {
if (moveable) {
var evt = window.event;
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) {
$(objDiv).style.left = x + "px";
$(objDiv).style.top = y + "px";
}
}
};
document.onmouseup = function () {
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
}
function MM_closeTip(objDiv){
$(objDiv).style.display="none";
document.body.removeChild($("divBody"));
}
function $(obj){
return document.getElementById(obj) || document.getElementsByName(obj)
}
function getWindowsEvent(){
return window.event || arguments.callee.caller.arguments[0];
}
</script>
</HEAD>
<BODY>
<div><a href="#html" onclick="MM_Tip('div1',300,210);" style="cusor:hand;">科学发展观</a><div>
<div id="div1" class="divNone" style="display:none;">
<div class="title"><a href="#html" class="closeCss" onclick="MM_closeTip('div1')">关闭</a></div>
<div class="roundtop">
<img src="images/tl.gif" alt="" width="5px" height="5px" class="corner"/>
</div>
<p>dsgsdgewtqewtqewtewqtewqtqewtewds<br/>
我有人人在在要要有有有有要要eewt<br/>
我有人人在在要要有有有有要要ewtw<br/>
我有人人在在要要有有有有要要t<br/>
我有人人在在要要有有有有要要ewtw<br/>
我有人人在在要要有有有有要要t<br/>
我有人人在在要要有有有有要要q<br/>
我有人人在在要要有有有有要要ewtw<br/>
我有人人在在要要有有有有要要t<br/>
我有人人在在要要有有有有要要q<br/>
我有人人在在要要有有有有要要q<br/>
我有人人在在要
</p>
<div class="roundbottom">
<img src="images/bl.gif" alt="" width="5px" height="5px" class="corner" />
</div>
</div>
</BODY>
</HTML>
注：主要是学习鼠标拖动层的代码和效果