样式和脚本:
<style type="text/css">
#postit{
position:absolute;
width:250;
padding:5px;
background-color:#FFFFFF;
border:1px solid red;
z-index:100;
cursor:hand;
color: red;
}
</style>
<script type="text/javascript">
function closeit(){
document.getElementById("postit").style.display="none";
}
//可拖动的层
var currentMoveObj = null; //当前拖动对象
var relLeft; //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj)
{
currentMoveObj = obj; //当对象被按下时,记录该对象
currentMoveObj.style.position = "absolute";
relLeft = event.x - currentMoveObj.style.pixelLeft;
relTop = event.y - currentMoveObj.style.pixelTop;
}
window.document.onmouseup = function()
{
currentMoveObj = null; //当鼠标释放时同时释放拖动对象
}
function f_move(obj)
{
if(currentMoveObj != null)
{
currentMoveObj.style.pixelLeft=event.x-relLeft;
currentMoveObj.style.pixelTop=event.y-relTop;
}
}
</script>
jsp页面:
<div id="postit" style="left:45%;top:2%" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<div align="right"><b><a href="javascript:closeit()">[关闭]</a></b></div>
hello,welcome to china!
</div>
运行代码,就可以拖动层在页面上移动了!
分享到:
相关推荐
JS可拖动层 javascript可拖动层
js版许愿墙 拖动层 许愿墙 可拖动层
jQuery弹出可拖动层
JS实现的可拖动停靠层,两个层可替换,类似于Google那个.
通用可移动层示例,打开 可移动层示例.html 可直接查看效果
div 拖动 div 拖动 div 拖动 div 拖动 div 拖动 div 拖动
已经定义成方法,直接用就行。兼容性已经全部搞定,具体样式可自行修改
jquery编写HTML 鼠标可拖动层DIv 整理源代码。比网络上的其他鼠标拖动效果比较小巧,结构清楚,没有那么多花里胡哨的垃圾代码。
一个asp.net 1.1做的拖动层然后保存层拖动后的信息,偶自己添加了层信息保存在xml中。 js不是偶写的,偶只修改了一部份!
javascript 实现可拖动的层(DIV),支持兼容性
可随意拖动的层,用来实现动态排版非常方便
使用JQuery实现的在网页上任意拖动层,代码简单易懂,对于初学JQuery 者们,是个不错的练习参考代码哦.
“度”是一个模块,用于计算两个点之间或当前层与可拖动层的起始位置之间的角度(以度为单位)。 演示版 现场演示: : 入门 # Copy ‚degrees.coffee’ into your project’s ‚modules‘-folder # Include module ...
js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器
可拖动的弹出层提示效果
JS做的隐藏与显示DIV可拖动弹出层实例代码 学习参考
javacript模拟对话框,可拖动层,QQ对话框风格,包含图片样式,实例说明
可以自由拖动层的位置 并有预览效果和动画效果
一款JavaScript开发的弹出层,代码简洁,使用的漂亮弹出层 可拖动的弹出层 遮罩层。