<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
div{height:300px;width:300px;position:absolute;top:10px;left:20px;background:red;}
</style>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript">
//先加载页面
$(function(){
//先获得对象
var imgObj=document.getElementById("imges");
//当鼠标按下时
imgObj.onmousedown =function(event){
var imgX=event.clientX-imgObj.offsetLeft;
var imgY=event.clientY-imgObj.offsetTop;
//当鼠标按下并移动是时候
//注意这是移动是对文档
document.onmouseover =function(event){
var overX=event.clientX-imgX;
var overY=event.clientY-imgY;
imgObj.style.left=overX+"px";
imgObj.style.top=overY+"px";
}
//当鼠标离开时就调用函数把鼠标覆盖置为空；
document.onmouseup= function(){
document.onmouseover=null;
}
}
})
</script>
</head>
<body>
<div id="imges"></div>
</body>
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
div{height:300px;width:300px;position:absolute;top:10px;left:20px;background:red;}
</style>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript">
//先加载页面
$(function(){
//先获得对象
var imgObj=document.getElementById("imges");
//当鼠标按下时
imgObj.onmousedown =function(event){
var imgX=event.clientX-imgObj.offsetLeft;
var imgY=event.clientY-imgObj.offsetTop;
//当鼠标按下并移动是时候
//注意这是移动是对文档
document.onmouseover =function(event){
var overX=event.clientX-imgX;
var overY=event.clientY-imgY;
imgObj.style.left=overX+"px";
imgObj.style.top=overY+"px";
}
//当鼠标离开时就调用函数把鼠标覆盖置为空；
document.onmouseup= function(){
document.onmouseover=null;
}
}
})
</script>
</head>
<body>
<div id="imges"></div>
</body>
</html>
效果图：
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
