首頁
網(wǎng)頁特效庫
網(wǎng)頁特效庫
導(dǎo)航菜單
按鈕表單
背景特效
時間日期
圖片特效
鼠標(biāo)特效
文本操作
窗口頁面
狀態(tài)欄類
警告對話
綜合應(yīng)用
游戲娛樂
首頁
>
特效
>
導(dǎo)航菜單
> 正文
顯示隱藏并移動的層效果
2009-11-23 導(dǎo)航菜單 ℃
<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 class="y9gvkwc" id="scontentmain"> <div class="cg9vbh9" id="scontentbar" onClick="onoffdisplay()" align="right"> <b><font color="#FFFFFF"> <span size=1>顯示/隱藏</span> </font></b> </div> <div class="2dwlae4" 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 //相當(dāng)于h=h+document.body.scrollTop //alert(h) var leftpos=w var toppos=h //初始坐標(biāo)// 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>
相關(guān)特效代碼
無相關(guān)信息
熱門特效代碼
三級豎向展開/收縮導(dǎo)航菜單
鼠標(biāo)指向彈出菜單
jQuery 彈出菜單層
CSS二級下拉導(dǎo)航菜單
CSS做的垂直導(dǎo)航菜單效果
橫向二級導(dǎo)航菜單
仿google首頁下端圖片文字動畫導(dǎo)
導(dǎo)航鏈接菜單間隔閃爍
動態(tài)翻滾的導(dǎo)航條[酷比flash]
純CSS的三級聯(lián)動級聯(lián)菜單
推薦特效代碼
CSS+div+js組合強(qiáng)大實現(xiàn)超酷菜單
動態(tài)翻滾的導(dǎo)航條[酷比flash]
CSS橫向下拉菜單
微軟風(fēng)格的CSS橫向菜單
立體的CSS按鈕菜單效果
左側(cè)隱藏的菜單
網(wǎng)站首頁
|
關(guān)于我們
|
游客留言
|
網(wǎng)站地圖
|
免責(zé)聲明
|
返回頂部
陜ICP備05013981號-6
