runxinzhi.com
首页
百度搜索
javascript + DIV +CSS 实现可拖动消息窗体
<
html
>
<
head
>
<
style
>
#div
{
}
{
width
:
300px
;
height
:
200px
;
color=red;border-top
:
1px solid #000
;
border-bottom
:
1px solid #000
;
border-left
:
1px solid #000
;
border-right
:
1px solid #000
;
size=13px;position
:
absolute
;
bottom
:
50px
;
right=80px;
}
</
style
>
</
head
>
<
body
>
<
script
language
="javascript"
>
var
moveable
=
false
;
function
aa(val)
{
var
obj
=
document.getElementById(
"
div
"
);
if
(val
==
0
)
{
obj.style.display
=
""
;
var
x,y;
x
=
event.clientX;
y
=
event.clientY;
obj.style.left
=
x;
obj.style.top
=
y;
//
alert("X:"+x+"Y:"+y);
}
else
obj.style.display
=
"
none
"
;
}
function
startgrap(obj)
{
if
(event.button
==
1
)
{
obj.setCapture();
//
记录鼠标和层位置;
x0
=
event.clientX;
y0
=
event.clientY;
x1
=
parseInt(obj.style.left);
y1
=
parseInt(obj.style.top);
moveable
=
true
;
}
}
function
stopgrap(obj)
{
if
(moveable)
{
obj.releaseCapture();
//
用来释放对鼠标的捕捉
moveable
=
false
;
}
}
function
grap(obj)
{
if
(moveable)
{
obj.style.left
=
x1
+
event.clientX
-
x0;
obj.style.top
=
y1
+
event.clientY
-
y0;
}
}
</
script
>
<
form
id
="form1"
>
<
input
type
=button
value
="DIV应用"
onmousemove
="aa(0);"
>
<
div
id
="div2"
style
="background:#ff00cc;width=100px;"
onmousemove
="aa(0);"
>
鼠标移到上面试试看
</
div
>
<
div
id
="div"
style
="display:none"
onmousedown
="startgrap(this);"
onmouseup
="stopgrap(this);"
onmousemove
="grap(this);"
>
<
div
style
="border-top:1px solid red;position:absolute;right=1px;"
><
span
onclick
="aa(1);" style="cursor:hand"
><
font
color
="#eee"
><
b
>
关闭
</
b
></
font
></
span
></
div
>
<
span
>
I Like you ,do you know?
<
br
>
if you don`t know,now i tell you,i tell you!
<
br
><
br
>
透明窗体,可拖动
</
span
>
</
div
>
</
form
>
</
body
>
</
html
>
本程序测试通过,大家有好的方法可一起讨论!谢谢
相关阅读:
ThinkPHP 3.2 调用自定义函数库
phpstorm 2017版代码提示功能开启解决方案
phpstorm 2017激活
JavaScript返回上一页和返回上一级页面并刷新
PHP处理Ajax请求与Ajax跨域
13个能快速开发android的经典项目
分享6款优秀的 AR/VR 开源库
Android-----购物车(包含侧滑删除,商品筛选,商品增加和减少,价格计算,店铺分类等)
Android------视频播放器(包含全屏播放,快退,快进,腾讯新闻的列表播放等)
吴恩达课后作业学习2-week1-2正则化
原文地址:https://www.cnblogs.com/Lewis/p/450978.html
最新文章
ubuntu下安装mysql及卸载mysql方法
ubuntu系统安装mysql(deb-bundle包)
Ubuntu 14.04 安装jdk,tomcat
安装mysql中遇到的问题1
ubuntu14.04上安装Mysql-5.7.11
linux tree命令以树形结构显示文件目录结构
Struts2+Spring3+MyBatis3整合以及Spring注解开发
[linux基础学习]默认的目录介绍
centos7常用命令集合
Python endswith() 方法
热门文章
Python encode() 方法
Python bytes decode() 方法
Python count() 方法
Python center() 方法
Python capitalize() 方法
Python radians() 函数
Python degrees() 函数
Python tan() 函数
Python sin() 函数
thinkphp3.2验证码在服务器上显示不出来
Copyright © 2020-2023
润新知