站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: js实现iGoogleDivDrag模块拖动层拖动特效的方法
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

js实现iGoogleDivDrag模块拖动层拖动特效的方法

来源: 易采站长站

本文实例讲述了js实现iGoogleDivDrag模块拖动层拖动特效的方法。分享给大家供大家参考。具体实现方法如下:

代码如下:<!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>js实现iGoogle Div Drag 模块拖动 层拖动效果</title>
<style type="text/css">
*{margin:0px; padding:0px;}
 body{position:relative; width:780px; height:800px; border:1px solid red}
.drag{width:200px; height:100px; border:1px solid #000;margin:20px; background:#fff}
.drag h1{margin:0px; padding:0px; font-size:12px; height:18px; line-height:18px; background:#E0E7F3; text-indent:20px;cursor:move;}
.center{ margin:200px; border:3px solid red}
</style>
<script type="text/javascript"></script>
</head>
<body>
 <div class="drag" >
 <h1><strong>www.baidu.com</strong></h1>
 </div>
 <div class="drag" >
 <h1>www.163.com</h1>
 </div>
 <div class="drag" >
 <h1><strong>www.jb51.net</strong></h1>
 </div>
 <div class="drag"><h1>测试二</h1></div>
 <div class="drag"><h1>测试三</h1></div>
 <div class="drag"><h1>测试四</h1></div>
 <div class="drag"><h1>测试五</h1></div>
</body>
</html>
<script type="text/javascript">
/*
Author  : popper.w
Version : v2.0
*/
var DragZindexNumber=0;
function drag(obj){
var ox,oy,ex,xy,tag=0,mask=0;
if(tag==0){
obj.onmousedown=function(e)
 {  
  if(mask==1){return; }
  obj.style.zIndex=DragZindexNumber++;
     transp(obj,"start")
  tag=1;
  var e = e||window.event;
  ex=getEventOffset(e).offsetX;
  ey=getEventOffset(e).offsetY;
  ox=parseInt(obj.offsetLeft);
  oy=parseInt(obj.offsetTop);
  tempDiv=document.createElement("div");
  with(tempDiv.style)
   {
   width=obj.offsetWidth+"px";
   height=obj.offsetHeight+"px";
   border="1px dotted red";
   position="absolute";
   left=obj.offsetLeft+"px";
   top=obj.offsetTop+"px";
   zIndex=999;
   }
  document.body.appendChild(tempDiv);
  this.ele=tempDiv;
  fDragStart(tempDiv);
  document.body.onmousemove=function(e){

Tags:
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -