心 涯

NET&JAVA&PHP(要跨界,你不只要跨「脑」的界限,更要跨越「心」的界限,不怕改变,不怕再学习!)

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

有两个图片。需要的请留言!代码如下:

<!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{
 width: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 {
 width: 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>

注:主要是学习鼠标拖动层的代码和效果

posted on 2009-05-20 18:22  witer666  阅读(233)  评论(0编辑  收藏  举报