首页
网页特效库
网页特效库
导航菜单
按钮表单
背景特效
时间日期
图片特效
鼠标特效
文本操作
窗口页面
状态栏类
警告对话
综合应用
游戏娱乐
首页
>
特效
>
导航菜单
> 正文
显示隐藏并移动的层效果
2009-11-23 导航菜单 ℃
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可以显示隐藏并移动的层</title> </head> <body> <hr /> <div style="height:1200px;"></div> <style> <!-- .drag{position:relative;cursor:hand } #scontentmain{ position:absolute; width:150px; } #scontentbar{ cursor:hand; position:absolute; background-color:green; height:15; width:100%; top:0; font: 9pt; } #alixixi{ position:absolute; width:100%; top:15; background-color:lightyellow; border:2px solid green; padding:1.5px; } --> </style> <script language="JavaScript1.2"> <!-- var dragapproved=false var zcor,xcor,ycor function movescontentmain(){ if (event.button==1&&dragapproved){ zcor.style.pixelLeft=tempvar1+event.clientX-xcor zcor.style.pixelTop=tempvar2+event.clientY-ycor leftpos=document.all.scontentmain.style.pixelLeft-document.body.scrollLeft toppos=document.all.scontentmain.style.pixelTop-document.body.scrollTop return false } } function dragscontentmain(){ if (!document.all) return if (event.srcElement.id=="scontentbar"){ dragapproved=true zcor=scontentmain tempvar1=zcor.style.pixelLeft tempvar2=zcor.style.pixelTop xcor=event.clientX ycor=event.clientY document.onmousemove=movescontentmain } } document.onmousedown=dragscontentmain document.onmouseup=new Function("dragapproved=false") //--> </script> <div id="scontentmain"> <div id="scontentbar" onClick="onoffdisplay()" align="right"> <b><font color="#FFFFFF"> <span size=1>显示/隐藏</span> </font></b> </div> <div id="23"> <font face="Arial"><small><small><br/>频道分类如下：<br/> <a href="/">效果1</a><br/> <a href="/">效果2</a><br/> <a href="/">效果3</a><br/> <a href="/">效果4</a><br/> <a href="/">效果5</a><br/> <a href="/">效果6</a><br/> <a href="/">效果7</a><br/> </small></small></font> </div> </div> <script language="JavaScript1.2"> //显示与隐藏// function onoffdisplay(){ if (alixixi.style.display=='') alixixi.style.display='none' else alixixi.style.display='' } //--end--// var w=document.body.clientWidth-195 var h=50 //定义h初始值 w+=document.body.scrollLeft h+=document.body.scrollTop //相当于h=h+document.body.scrollTop //alert(h) var leftpos=w var toppos=h //初始坐标// scontentmain.style.left=w scontentmain.style.top=h //--end--// //随屏控制// function staticize(){ w2=document.body.scrollLeft+leftpos h2=document.body.scrollTop+toppos scontentmain.style.left=w2 scontentmain.style.top=h2 } window.onscroll=staticize //--end--// </script> </body> </html>
相关特效代码
无相关信息
热门特效代码
三级竖向展开/收缩导航菜单
鼠标指向弹出菜单
jQuery 弹出菜单层
CSS二级下拉导航菜单
CSS做的垂直导航菜单效果
横向二级导航菜单
仿google首页下端图片文字动画导
导航链接菜单间隔闪烁
动态翻滚的导航条[酷比flash]
纯CSS的三级联动级联菜单
推荐特效代码
CSS+div+js组合强大实现超酷菜单
动态翻滚的导航条[酷比flash]
CSS横向下拉菜单
微软风格的CSS横向菜单
立体的CSS按钮菜单效果
左侧隐藏的菜单
