关于JS的2个有关问题！图片拖动，以及实现WINDOWS下开始那种效果
日期：2014-05-16 浏览次数：20373 次
关于JS的2个问题！图片拖动，以及实现WINDOWS下开始那种效果！
1：JS中如何实现图片拖动？
2：在页面中实现WINDOWS下点开始后出一堆导航那种效果
请指教!
------解决方案--------------------
双击显示菜单(lz可以自己改成单击或其他事件)，单击菜单外面则菜单消失
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 新建网页 1 </title>
<script>
var x=0;
var y=0;
var can_move=false;
function mouse_down(){
if(event.srcElement.id== "div1 "){
x=event.x;
y=event.y;
can_move=true;}
if(event.srcElement.id!= "div2 "&&event.srcElement.parentNode.id!= "div2 "){
document.all.div2.style.display= "none ";
}
}
function mouse_move(){
if(can_move){
var top=document.all.div1.style.top;
var left=document.all.div1.style.left;
document.all.div1.style.top=parseInt(top.substring(0,top.length-2))+(event.y-y);
document.all.div1.style.left=parseInt(left.substring(0,left.length-2))+(event.x-x);
y=event.y;
x=event.x;
}
}
function mouse_up(){
can_move=false;
}
function dbclick(){
var top=document.all.div1.style.top;
var height=document.all.div1.style.height;
var left=document.all.div1.style.left;
document.all.div2.style.top=parseInt(top.substring(0,top.length-2))+parseInt(height.substring(0,height.length-2));
document.all.div2.style.left=parseInt(left.substring(0,left.length-2));
document.all.div2.style.display= "block ";
}
</script>
</head>
<body onmousemove= "mouse_move() " onmousedown= "mouse_down() ">
<div id=div1 style= "position:absolute;top:100px;left:100px;width:100px;height:100px;background-color:#cccccc " onmousedown= "mouse_down() " onmouseup= "mouse_up() " ondblclick= "dbclick() ">
单击拖动,双击显示菜单
</div>
<div id=div2 style= "position:absolute;display:none;background-color:#cccccc ">
<a href=# onclick= "alert( '标题1 '); "> 标题1 </a> <br>
<a href=# onclick= "alert( '标题2 '); "> 标题2 </a> <br>
<a href=# onclick= "alert( '标题3 '); "> 标题3 </a>
</div>
</body>
</html>
1：JS中如何实现图片拖动？
2：在页面中实现WINDOWS下点开始后出一堆导航那种效果
请指教!
------解决方案--------------------
双击显示菜单(lz可以自己改成单击或其他事件)，单击菜单外面则菜单消失
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 新建网页 1 </title>
<script>
var x=0;
var y=0;
var can_move=false;
function mouse_down(){
if(event.srcElement.id== "div1 "){
x=event.x;
y=event.y;
can_move=true;}
if(event.srcElement.id!= "div2 "&&event.srcElement.parentNode.id!= "div2 "){
document.all.div2.style.display= "none ";
}
}
function mouse_move(){
if(can_move){
var top=document.all.div1.style.top;
var left=document.all.div1.style.left;
document.all.div1.style.top=parseInt(top.substring(0,top.length-2))+(event.y-y);
document.all.div1.style.left=parseInt(left.substring(0,left.length-2))+(event.x-x);
y=event.y;
x=event.x;
}
}
function mouse_up(){
can_move=false;
}
function dbclick(){
var top=document.all.div1.style.top;
var height=document.all.div1.style.height;
var left=document.all.div1.style.left;
document.all.div2.style.top=parseInt(top.substring(0,top.length-2))+parseInt(height.substring(0,height.length-2));
document.all.div2.style.left=parseInt(left.substring(0,left.length-2));
document.all.div2.style.display= "block ";
}
</script>
</head>
<body onmousemove= "mouse_move() " onmousedown= "mouse_down() ">
<div id=div1 style= "position:absolute;top:100px;left:100px;width:100px;height:100px;background-color:#cccccc " onmousedown= "mouse_down() " onmouseup= "mouse_up() " ondblclick= "dbclick() ">
单击拖动,双击显示菜单
</div>
<div id=div2 style= "position:absolute;display:none;background-color:#cccccc ">
<a href=# onclick= "alert( '标题1 '); "> 标题1 </a> <br>
<a href=# onclick= "alert( '标题2 '); "> 标题2 </a> <br>
<a href=# onclick= "alert( '标题3 '); "> 标题3 </a>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
