zoukankan
html css js c++ java
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
>
本程序测试通过,大家有好的方法可一起讨论!谢谢
查看全文
相关阅读:
Android自定义控件之仿美团下拉刷新
Android性能优化之Bitmap的内存优化
基于openfire+smack即时通讯instant message开发
Android各组件/控件间通信利器之EventBus
android的task任务栈
Activity的启动模式
Android 自定义View (一)
Android之Handler用法总结
Android中轻松使用线程
Android 中Activity,Window和View之间的关系
原文地址:https://www.cnblogs.com/Lewis/p/450978.html
最新文章
php根据时间显示刚刚,几分钟前,几小时前的实现代码
小程序下拉加载
LoveIsIntheAir模板换背景
小程序轮播图显示三个数据
小程序传入两个值
昨日清空,青春
php 路途一点启示
小程序显示数据
php求取时间范围并传入数据库,页面上显示几天几月几年
小程序打广告一闪一闪的
热门文章
adb端口被占用解决
adb操作指令大全
Android应用程序App应用上线流程
EditText中inputType详解
内容观察者使用(程序锁应用中的使用)
内容观察者
“adb server is out of date.
增强for循环
Android中的异常情况
启动Eclipse时,弹出failed to load the jni shared library
Copyright © 2011-2022 走看看