<HTML>
<HEAD>
<TITLE> Drag_126_like </TITLE>
</HEAD>
<BODY>
<style>
body,td,a {font-size:9pt;color:black}
.none{border:black 1px solid;background:D9D9D9;padding-top:2}
.over {border:black 1px solid;background:707888;color:white;padding-top:2}
</style>
<!--css:
加载css样式的方式：
head内引用 <style type = "text/css"></stylt>
body内引用 <div style = "">...</div>
文件外引用(Head内) <link rel = stylesheet href = "mystyle.css" type = "text/css">
<style type = "text/css"> @import url(mystyle.css); </style>
css与标记对应的方式：
标记选择符 如： body,td,a {font-size:9pt;color:black}
类选择符 在html标记中使用class= "classname"，然后在style标记内用".classname",如
.none{border:black 1px solid;background:D9D9D9;padding-top:2}
ID选择符 html内用"ID = SZG", style 内用#SZG
-->
<body onmousemove="move()">
<div style="position:absolute; left: 100; top: 100; width: 1; height: 1;cursor: hand" ID=plane onmousedown="down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-parseInt(plane.style.top)"onmouseup="down=false">
<div align=center style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:1;color:white;background:707888;
cursor:move"onmouseover='stopTimerline();menuItemIn()' onmouseout='runTimerline()'class="none">
可拖动的菜单</div>
<div align=center id="item11" style="position:absolute; left:50px; top:55px; width:99px; height:19px;
z-index:2; filter:alpha(opacity=0)"class="none" onmouseover="this.className='over';stopTimerline()"
onmouseout="this.className='none';runTimerline()" >菜单项一</div>
<!--这里还要设置鼠标如果离开可拖动菜单，over item11等时，必须stopTimerline()
this.className='over'设置<div class = "over"
-->
<div align=center id="item12" style="position:absolute; left:250px; top:77px; width:99px; height:19px; z-index:3;filter:alpha(opacity=0)"class=none onmouseover="this.className='over';stopTimerline()"
onmouseout="this.className='none';runTimerline()">菜单项二</div>
<div align=center id="item13" style="position:absolute; left:50px; top:99px; width:99px; height:19px;
z-index:4; filter:alpha(opacity=0)"class=none onmouseover="this.className='over';stopTimerline()"
onmouseout="this.className='none';runTimerline()">菜单项三</div>
<div align=center id="item14" style="position:absolute; left:250px; top:121px; width:99px; height:19px; z-index:5;filter:alpha(opacity=0)"class=none onmouseover="this.className='over';stopTimerline()"
onmouseout="this.className='none';runTimerline()">菜单项四</div>
<div align=center id="item15" style="position:absolute; left:50px; top:143px; width:99px; height:19px;
z-index:6; filter:alpha(opacity=0)"class=none onmouseover="this.className='over';stopTimerline()"
onmouseout="this.className='none';runTimerline()">菜单项五</div>
</div>
<script>
//动画菜单
/*javascript
解释型语言，浏览器边解释边执行
定义变量时候只有一个关键字var
javascript的变量是弱变量，不经过声明就可以使用，建议先用var声明==>java是强变量语言
javascript语句后面可以加分号，也可以不加。建议加
javascript的事件：超级连接事件，浏览器事件，界面事件（click, mouseout,mouseover,mousedown）
如onmouseover="this.className='over';stopTimerline()"
*/
var currTimerlinePoint=0
var totalTimerlineFrames=2
var timerlineTimer
var leftLine = 50
var timerIn
var timerOut
var timerlineArray = new Array()
timerlineArray[0]=''
timerlineArray[1]='menuItemOut()'
/*setTimeout & clearTimeout
在Javascript给事件定时。利用setTimeout(), 指令可以在未来的某个指定时间执行特定指令。
如果你改变主意，你可以用clearTimeout()取消setTimeout的定时.
*/
function runTimerline(){//onmouseout
window.timerlineTimer = setTimeout('menuItemOut()',500)
//这里的时间不能太短，否则用户item，进入item11等菜单时就menuItemOut了
}
function stopTimerline(){//onmouserover
clearTimeout(window.timerlineTimer)
}
function menuItemIn(){//onmouseover
/*
html.div中用了个技巧，将item11放在left处，再设置filters.alpha.opacity=0，如此用户就看不见，
鼠标移上去时，组件出现，从远处来的效果
*/
if( leftLine != 150){
item11.style.pixelLeft += 20; item11.filters.alpha.opacity += 20
item12.style.pixelLeft -= 20; item12.filters.alpha.opacity += 20
item13.style.pixelLeft += 20; item13.filters.alpha.opacity += 20
item14.style.pixelLeft -= 20; item14.filters.alpha.opacity += 20
item15.style.pixelLeft += 20; item15.filters.alpha.opacity += 20
leftLine += 20
}
else{
clearTimeout(window.timerIn)
return false
}
timerIn=window.setTimeout('menuItemIn()',1)
//利用setTimeout来不断重复执行menuItemIn，否则只执行一次。直到leftLine＝150===>用循环来做？
/*
傻的用循环试图解决，第一种执行的太快，看不出循序渐进；第二种太慢.....
do{
item11.style.pixelLeft += 20; item11.filters.alpha.opacity += 20
item12.style.pixelLeft -= 20; item12.filters.alpha.opacity += 20
item13.style.pixelLeft += 20; item13.filters.alpha.opacity += 20
item14.style.pixelLeft -= 20; item14.filters.alpha.opacity += 20
item15.style.pixelLeft += 20; item15.filters.alpha.opacity += 20
leftLine += 20
}while(leftLine!=150)
for (i = 0;i<10,leftLine!=150 ;i++){
if(i==2||i==4||i==6||i==8){
item11.style.pixelLeft += 20; item11.filters.alpha.opacity += 20
item12.style.pixelLeft -= 20; item12.filters.alpha.opacity += 20
item13.style.pixelLeft += 20; item13.filters.alpha.opacity += 20
item14.style.pixelLeft -= 20; item14.filters.alpha.opacity += 20
item15.style.pixelLeft += 20; item15.filters.alpha.opacity += 20
leftLine += 20
}
}
*/
}
function menuItemOut(){
clearTimeout(window.timerIn)
if (leftLine != 50){
item11.style.pixelLeft -= 20; item11.filters.alpha.opacity -= 20
item12.style.pixelLeft += 20; item12.filters.alpha.opacity -= 20
item13.style.pixelLeft -= 20; item13.filters.alpha.opacity -= 20
item14.style.pixelLeft += 20; item14.filters.alpha.opacity -= 20
item15.style.pixelLeft -= 20; item15.filters.alpha.opacity -= 20
leftLine -= 20
}
else{
clearTimeout(window.timerOut)
return false;
}
timerOut=window.setTimeout("menuItemOut()",1)
}
//移动层==============>不懂...
var over=false,down=false,divleft,divtop;
function move(){
if(down){
plane.style.left=event.clientX-divleft;
plane.style.top=event.clientY-divtop;
}
}
</script>
</BODY>
</HTML>
相关推荐
JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）...
1. **提高编程技能**：通过分析优秀的源代码，可以学习到很多编程技巧和模式。 2. **理解框架内部机制**：对于常用的框架如React、Vue等，深入了解其源码有助于更好地运用这些框架解决问题。 3. **贡献社区**：阅读...
这个名为"javascript下拉菜单源代码"的资源包含了可以直接使用的JavaScript代码，用于创建下拉菜单。它的好处在于无需进行大量的定制或修改，即可直接整合到你的网页项目中。这为开发者节省了时间，并且提供了稳定和...
通过阅读和分析这些源代码，你可以了解到如何组织和编写JavaScript代码，如何操作DOM，以及如何使用事件处理程序。此外，还可以学习到如何结合CSS和JavaScript实现更复杂的动态效果。在实际项目中，这样的技能将非常...
JavaScript开发项目法律咨询微信小程序源代码，JavaScript开发项目法律咨询微信小程序源代码JavaScript开发项目法律咨询微信小程序源代码JavaScript开发项目法律咨询微信小程序源代码JavaScript开发项目法律咨询微信...
总的来说，“Javascript开发技术大全源代码”是一个宝贵的资源，它包含了实现各种JavaScript效果的实例，适合初学者巩固基础，也适合有经验的开发者参考和学习新的编程技巧。通过逐步解析和实践这些源代码，你将在...
初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识...
JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）JavaScript数组（源代码）...
总之，"JavaScript前端开发案例教程-源代码.rar"提供了一个全面学习和实践JavaScript前端开发的平台，通过分析和运行这些源代码，你不仅可以巩固基础知识，还能了解前沿技术，提升自己的开发能力。建议按照文件的...
JavaScript学习资料JavaScript基础语法函数及相关源代码资料: BOM基础.pdf BOM基础（源代码）.zip Date对象之获取和设置月份-getMonth&setMonth（教辅）.pdf DOM事件总结（教辅）.pdf DOM事件（ppt）.pdf JavaScripr...
"500个JavaScript效果源代码"集合涵盖了众多实用的前端开发技巧和功能，是学习和提升JavaScript技能的宝贵资源。下面将详细探讨这些源代码可能涉及的知识点： 1. **DOM操作**：JavaScript与Document Object Model...
JavaScript之Math对象（源代码）JavaScript之Math对象（源代码）JavaScript之Math对象（源代码）JavaScript之Math对象（源代码）JavaScript之Math对象（源代码）JavaScript之Math对象（源代码）JavaScript之Math对象...
JavaScript开发文旅招商云小程序源代码JavaScript开发文旅招商云小程序源代码JavaScript开发文旅招商云小程序源代码JavaScript开发文旅招商云小程序源代码JavaScript开发文旅招商云小程序源代码JavaScript开发文旅...
JavaScript开发课程设计校园新闻微信小程序源代码，JavaScript开发课程设计校园新闻微信小程序源代码JavaScript开发课程设计校园新闻微信小程序源代码JavaScript开发课程设计校园新闻微信小程序源代码JavaScript开发...
JavaScript开发积分兑换小程序项目源代码JavaScript开发积分兑换小程序项目源代码JavaScript开发积分兑换小程序项目源代码JavaScript开发积分兑换小程序项目源代码JavaScript开发积分兑换小程序项目源代码。...
JavaScript分支语句(源代码)JavaScript分支语句(源代码)JavaScript分支语句(源代码)JavaScript分支语句(源代码)JavaScript分支语句(源代码)JavaScript分支语句(源代码)JavaScript分支语句(源代码)JavaScript分支语句...
本“JavaScript学习指南”源代码包含了深入理解并掌握JavaScript编程的关键知识点。 一、基础语法 JavaScript的基础语法包括变量声明（var、let、const）、数据类型（如字符串、数字、布尔值、null、undefined、...
JavaScript培训学习PPT教程（js资料和源代码） DOM事件总结（教辅）.pdf DOM事件（ppt）.pdf JavaScripr之while循环（源代码）.zip JavaScript中的循环总结（教辅）.pdf JavaScript之Date对象（源代码）.zip ...
JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源...
源代码分析能帮助读者更好地理解这些概念如何在实际场景中应用。例如，书中可能会包含关于事件处理、DOM操作、AJAX请求、定时器以及错误处理的示例。这些是构建网页交互性和动态功能的基本技能。 此外，书中可能还...