然后用js控制这个框的隐藏和显示
就行了
不过现在又很多插件，jquery的，还有其他自定义的，都很好用
自己写一个就是要花点时间
1、输入代码，其中button是鼠标要滑动的地方，滑过button时，class为content的内容就要显示出来，鼠标滑出去的时候，这块内容就需要重新隐藏起来。
2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。
3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。
4、把onmouseover和onmouseout两个事件作用在button上面，再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。
5、在浏览器中就可以看到效果了。
<html><head>
<title>jQuery实现DIV层拖动效果</title>
<style type="text/css">
#div2
{
position:absolute
width:335px
height:80px
background-color:#777788
cursor:move
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
var _move=false//移动标记
var _x,_y//鼠标离控件左上角的相对位置
$(document).ready(function(){
$("#div2").mousedown(function(e){
_move=true
_x=e.pageX-parseInt($("#div2").css("left"))
_y=e.pageY-parseInt($("#div2").css("top"))
$("#div2").fadeTo(20, 0.25)//点击后开始拖动并透明显示
})
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y
$("#div2").css({"top":y,"left":x})//控件新位置
}
}).mouseup(function(){
_move=false
$("#div2").fadeTo("fast", 1)//松开鼠标后停止移动并恢复成不透明
})
})
</script>
</head>
<body>
<div id="div2">拖拽</div>
</body>
</html>
自己看看，看懂了自己修改代码，改成自己的
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）