`
caozuiba
  • 浏览: 903651 次
文章分类
社区版块
存档分类
最新评论

网页中对像的拖动代码

 
阅读更多
<html>
<head>
<title>_xWin</title>
<styletype='text/css'>
<!--
a:visited{text-decoration:none;color:slategray;}
a:hover{text-decoration:underline;color:slategray;}
a:link{text-decoration:none;color:slategray;}
-->
</style>
<scriptlanguage=JScript>
<!--
//可以打包为js文件;
varx0=0,y0=0,x1=0,y1=0;
varoffx=6,offy=6;
varmoveable=false;
varhover='orange',normal='slategray';//color;
varindex=10000;//z-index;
//开始拖动;
functionstartDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
varwin=obj.parentNode;
varsha=win.nextSibling;
//记录鼠标和层位置;
x0=event.clientX;
y0=event.clientY;
x1=parseInt(win.style.left);
y1=parseInt(win.style.top);
//记录颜色;
normal=obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor=hover;
win.style.borderColor=hover;
obj.nextSibling.style.color=hover;
sha.style.left=x1+offx;
sha.style.top=y1+offy;
moveable=true;
}
}
//拖动;
functiondrag(obj)
{
if(moveable)
{
varwin=obj.parentNode;
varsha=win.nextSibling;
win.style.left=x1+event.clientX-x0;
win.style.top=y1+event.clientY-y0;
sha.style.left=parseInt(win.style.left)+offx;
sha.style.top=parseInt(win.style.top)+offy;
}
}
//停止拖动;
functionstopDrag(obj)
{
if(moveable)
{
varwin=obj.parentNode;
varsha=win.nextSibling;
varmsg=obj.nextSibling;
win.style.borderColor=normal;
obj.style.backgroundColor=normal;
msg.style.color=normal;
sha.style.left=obj.parentNode.style.left;
sha.style.top=obj.parentNode.style.top;
obj.releaseCapture();
moveable=false;
}
}
//获得焦点;
functiongetFocus(obj)
{
if(obj.style.zIndex!=index)
{
index=index+2;
varidx=index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
functionmin(obj)
{
varwin=obj.parentNode.parentNode;
varsha=win.nextSibling;
vartit=obj.parentNode;
varmsg=tit.nextSibling;
varflg=msg.style.display=="none";
if(flg)
{
win.style.height=parseInt(msg.style.height)+parseInt(tit.style.height)+2*2;
sha.style.height=win.style.height;
msg.style.display="block";
obj.innerHTML="0";
}
else
{
win.style.height=parseInt(tit.style.height)+2*2;
sha.style.height=win.style.height;
obj.innerHTML="2";
msg.style.display="none";
}
}
//关闭;
functioncls(obj)
{
varwin=obj.parentNode.parentNode;
varsha=win.nextSibling;
win.style.visibility="hidden";
sha.style.visibility="hidden";
}
//创建一个对象;
functionxWin(id,w,h,l,t,tit,msg)
{
index=index+2;
this.id=id;
this.width=w;
this.height=h;
this.left=l;
this.top=t;
this.zIndex=index;
this.title=tit;
this.message=msg;
this.obj=null;
this.bulid=bulid;
this.bulid();
}
//初始化;
functionbulid()
{
varstr=""
+"<divid=xMsg"+this.id+""
+"style='"
+"z-index:"+this.zIndex+";"
+"width:"+this.width+";"
+"height:"+this.height+";"
+"left:"+this.left+";"
+"top:"+this.top+";"
+"background-color:"+normal+";"
+"color:"+normal+";"
+"font-size:10px;"
+"font-family:Verdana;"
+"position:absolute;"
+"cursor:default;"
+"border:2pxsolid"+normal+";"
+"'"
+"onmousedown='getFocus(this)'>"
+"<div"
+"style='"
+"background-color:"+normal+";"
+"width:"+(this.width-2*2)+";"
+"height:20;"
+"color:white;"
+"'"
+"onmousedown='startDrag(this)'"
+"onmouseup='stopDrag(this)'"
+"onmousemove='drag(this)'"
+"ondblclick='min(this.childNodes[1])'"
+">"
+"<spanstyle='width:"+(this.width-2*12-4)+";padding-left:3px;'>"+this.title+"</span>"
+"<spanstyle='width:12;border-width:0px;color:white;font-family:webdings;'onclick='min(this)'>0</span>"
+"<spanstyle='width:12;border-width:0px;color:white;font-family:webdings;'onclick='cls(this)'>r</span>"
+"</div>"
+"<divstyle='"
+"width:100%;"
+"height:"+(this.height-20-4)+";"
+"background-color:white;"
+"line-height:14px;"
+"word-break:break-all;"
+"padding:3px;"
+"'>"+this.message+"</div>"
+"</div>"
+"<divstyle='"
+"width:"+this.width+";"
+"height:"+this.height+";"
+"top:"+this.top+";"
+"left:"+this.left+";"
+"z-index:"+(this.zIndex-1)+";"
+"position:absolute;"
+"background-color:black;"
+"filter:alpha(opacity=40);"
+"'>bywildwind</div>";
document.body.insertAdjacentHTML("beforeEnd",str);
}
//-->
</script>


<scriptlanguage='JScript'>
<!--
functioninitialize()
{
vara=newxWin("1",160,200,200,200,"Message","xWin<br>ACoolPopDivWindow<br>Version:1.0<br>2006-10-13");
varb=newxWin("2",240,200,100,100,"Wildwind'sMsgbox","Welcometovisitedmypersonalwebsite:<br><ahref=http://www.29design.nettarget=_blank>http://www.29design.net</a><br>anducanalsosignmyguestbookat:<br><ahref=http://www.21west.nettarget=_blank>http://www.21west.net</a><br><br>thx!!!=)...");
varc=newxWin("3",200,160,250,50,"Copyright","Copyrightby<ahref='mailto:jmzs168@163cn.com'>Wildwind</a>!");
}
window.onload=initialize;
//-->
</script>
</head>
<bodyonselectstart='returnfalse'oncontextmenu='returnfalse'scroll='no'>
</body>
</html>
分享到：
| JavaScript常用正则表达式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ASP.NET的网页代码模型及生命周期

    从上述代码中可以看出，在头部声明的时候，单文件页模型只包含Language=“C#”，而代码隐藏页模型包含了CodeFile=“Default.aspx.cs”，说明被分离出去处理事物的代码被定义在Default.aspx.cs中，示例代码如下所示。...

    javascript拖动div或table等网页元素

    用javascript拖动div或table等对象。 代码兼容各种浏览器,IE,Firefox,Opera,Safari等。 这里有三种拖动效果。

    JQuery权威指南源代码

    使用jQuery UI插件以拖动方式管理相册 第9章 使用browser对象获取浏览器信息 使用boxModel对象检测是否是W3C盒子模型 使用$.each()工具函数遍历数组 使用$.each()工具函数遍历ajaxSettings对象 使用$.grep()...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的jQuery代码参考书，可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    JAVA上百实例源码以及开源项目源代码

    　Java实现HTTP连接与浏览，Java源码下载，输入html文件地址或网址，显示页面和HTML源文件，一步步的实现过程请下载本实例的Java源码，代码中包括丰富的注释，对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...

    java源码包2

    　Java实现HTTP连接与浏览，Java源码下载，输入html文件地址或网址，显示页面和HTML源文件，一步步的实现过程请下载本实例的Java源码，代码中包括丰富的注释，对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...

    在线CAD中点坐标的功能代码如何写？CAD二次开发

    创建画布：使用Web CAD库提供的API创建一个用于绘制CAD图形的画布，如Three.js中，可以使用THREE.WebGLRenderer创建一个canvas对象。 创建点：使用Web CAD库提供的API创建点，通常需要指定点的坐标位置和属性。如...

    java源码包---java 源码 大量 实例

    　Java实现HTTP连接与浏览，Java源码下载，输入html文件地址或网址，显示页面和HTML源文件，一步步的实现过程请下载本实例的Java源码，代码中包括丰富的注释，对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...

    蜂巢平台 云计算应用框架 v0.4.0.1.zip

    . 软件介绍.....蜂巢采用了扩展模式，系统中的功能和特性，都由扩展提供。 因此，用户可以通过开发和安装扩展来部署各种类型的互联网应用。...文档的时效性也更强——它们都是从当前版本的源代码中编译出来的。

    零基础学HTML CSS源代码

    第1章（源代码\第1章） 示例描述：本章演示HTML基本知识 HTML基本标记.html HTML基本标记的用法。 我的第一张网页.html 演示我的第一张网页。 第2章（源代码\第2章） ...

    C++Builder精彩编程实例集锦的源代码(4,5,6部分).rar

    实例217 如何导出对象库中的商业决策分析程序 实例218 如何打印含有图像字段的数据库表 实例219 如何实现数据库表整表复制 实例220 如何实现数据库记录的批量删除 实例221 如何实现数据库记录的批量修改 实例...

    JAVA上百实例源码以及开源项目

    　Java实现HTTP连接与浏览，Java源码下载，输入html文件地址或网址，显示页面和HTML源文件，一步步的实现过程请下载本实例的Java源码，代码中包括丰富的注释，对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...

    《Android应用开发揭秘》附带光盘代码.

    　14.4.3 游戏对象与对象管理 　14.4.4 图形引擎 　14.4.5 物理引擎 　14.4.6 事件模块 　14.4.7 工具模块 　14.4.8 脚本引擎、音效模块、网络 　模块 　14.5 小结 　第15章 优化技术 　15.1 优化的基本知识 　...

    C++Builder精彩编程实例集锦的源代码前3部分.rar

    实例217 如何导出对象库中的商业决策分析程序 实例218 如何打印含有图像字段的数据库表 实例219 如何实现数据库表整表复制 实例220 如何实现数据库记录的批量删除 实例221 如何实现数据库记录的批量修改 实例...

    javascript网页特效实例大全

    11.2.1 网页中的flash对象 313 11.2.2 flash对象的调用 314 11.3 asp与activex组件 315 11.4 asp与javascript语言 315 11.4.1 脚本语言 316 11.4.2 设置脚本语言 316 11.4.3 服务器端的脚本 316 11.4.4 ...

    vue-element-nocode-admin:element-ui 的代码可视化编辑

    element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ...

    firefox 14 和网页开发的插件

    普通的一个网页在前端设计师 们眼中，不仅是单纯的文字图片，而是各种网页标签组成的结构图，但这些画面纯粹存在于设计师们的大脑中，X-Ray提供了一个让让它视觉化的方法，尤其是 在浏览别人的网站时尤其有用。...

    java源码包3

    　Java实现HTTP连接与浏览，Java源码下载，输入html文件地址或网址，显示页面和HTML源文件，一步步的实现过程请下载本实例的Java源码，代码中包括丰富的注释，对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...

Magicbox
Global site tag (gtag.js) - Google Analytics