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
>
本程序测试通过,大家有好的方法可一起讨论!谢谢
查看全文
相关阅读:
variant conversion error for variable:v8
oracle第二步创建表空间、用户、授权
Java WEB 乱码解决大全
跳转的两种方式(转发与重定向)
jsp页面中 <%%> <%! %>, <%=%> <%-- --%>有什么区别
Web.xml中Filter过滤器标签几个说明
SSH面试题(struts2+Spring+hibernate)
做一个java项目要经过那些正规的步骤
web.xml 配置中classpath: 与classpath*:的区别
Web.xml配置详解之context-param
原文地址:https://www.cnblogs.com/Lewis/p/450978.html
最新文章
SpringAOP拦截Controller,Service实现日志管理(自定义注解的方式)
Spring AOP 完成日志记录
PHP 行为测试工具 Codeception (介绍)
Yii2.0 高级模版编写使用自定义组件(component)
一个非常好用的PHP数组函数
解决 mysql in 查询排序问题
Yii2.0 技巧总结
使用iChecker的注意事项
重装系统后要做的事情
(转) PHP 开发者该知道的 5 个 Composer 小技巧
热门文章
使用github高级搜索
思想的转变
easui datagrid 行获取后台sql所有数据:支持行chockbox多选,输出选中行任意属性;支持点击表中属性实现跳转;支持分页。
ajax 获取json值
easyui textbox setvalue 和 settext前后之别
Duplicate property mapping of xxx found in xx 嵌套异常,重复的属性在映射中发现。
oracle 内置函数(三)日期函数
oracle 内置函数(二)字符函数
oracle 内置函数(一)数值函数
java 分别获取当前时间的年月日以及当前时间所在周的周一周末日期
Copyright © 2011-2022 走看看