js漸變彈出視窗和關閉視窗效果
本章節分享一段程式碼例項,它實現了漸變彈出視窗和關閉視窗的效果。
裡面涉及到不少的常用知識,比如事件註冊,還有動態設定元素的樣式,比如尺寸和透明度等。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>螞蟻部落</title> <style type="text/css"> body, span, div, td { font-size:12px; line-height:1.5em; color:#849BCA; } #bodyL{ float:left; width:84px; margin-right:2px; } a.od { width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border:2px solid #849BCA; display:block; color:#547BC9; float:left; text-decoration: none; margin-top:2px; } a.od:link{ background:#EEF1F8; } a.od:visited{ background:#EEF1F8; } a.od:hover{ background:#EEE; } a.od:active{ background:#EEE; } #fd { width:500px; height:200px; background:#EDF1F8; border:2px solid #849BCA; margin-top:2px; margin-left:2px; float:left; overflow:hidden; position:absolute; left:0px; top:0px; cursor:move; float:left; } .content{ padding:10px; } </style> </head> <body> <div id="bodyL"> <a href="#" class="od"> [開啟層] </a> <a href="#" class="od"> [關閉層] </a> </div> <div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;"> <div class="content">移動層</div> </div> <script type="text/javascript"> var prox; var proy; var proxc; var proyc; function show(id){/*--開啟--*/ clearInterval(prox); clearInterval(proy); clearInterval(proxc); clearInterval(proyc); var o = document.getElementById(id); o.style.display = "block"; o.style.width = "1px"; o.style.height = "1px"; prox = setInterval(function(){openx(o,500)},10); } function openx(o,x){/*--開啟x--*/ var cx = parseInt(o.style.width); if(cx < x){ o.style.width = (cx + Math.ceil((x-cx)/5)) +"px"; } else{ clearInterval(prox); proy = setInterval(function(){openy(o,200)},10); } } function openy(o,y){/*--開啟y--*/ var cy = parseInt(o.style.height); if(cy < y){ o.style.height = (cy + Math.ceil((y-cy)/5)) +"px"; } else{ clearInterval(proy); } } function closeed(id){/*--關閉--*/ clearInterval(prox); clearInterval(proy); clearInterval(proxc); clearInterval(proyc); var o = document.getElementById(id); if(o.style.display == "block"){ proyc = setInterval(function(){closey(o)},10); } } function closey(o){/*--開啟y--*/ var cy = parseInt(o.style.height); if(cy > 0){ o.style.height = (cy - Math.ceil(cy/5)) +"px"; } else{ clearInterval(proyc); proxc = setInterval(function(){closex(o)},10); } } function closex(o){/*--開啟x--*/ var cx = parseInt(o.style.width); if(cx > 0){ o.style.width = (cx - Math.ceil(cx/5)) +"px"; } else{ clearInterval(proxc); o.style.display = "none"; } } /*滑鼠拖動*/ var od = document.getElementById("fd"); var dx,dy,mx,my,mouseD; var odrag; var isIE = document.all ? true : false; document.onmousedown = function(e){ var e = e ? e : event; if(e.button == (document.all ? 1 : 0)){ mouseD = true; } } document.onmouseup = function(){ mouseD = false; odrag = ""; if(isIE){ od.releaseCapture(); od.filters.alpha.opacity = 100; } else{ window.releaseEvents(od.MOUSEMOVE); od.style.opacity = 1; } } //function readyMove(e){ od.onmousedown = function(e){ odrag = this; var e = e ? e : event; if(e.button == (document.all ? 1 : 0)){ mx = e.clientX; my = e.clientY; od.style.left = od.offsetLeft + "px"; od.style.top = od.offsetTop + "px"; if(isIE){ od.setCapture(); od.filters.alpha.opacity = 50; } else{ window.captureEvents(Event.MOUSEMOVE); od.style.opacity = 0.5; } } } document.onmousemove = function(e){ var e = e ? e : event; if(mouseD==true && odrag){ var mrx = e.clientX - mx; var mry = e.clientY - my; od.style.left = parseInt(od.style.left) +mrx + "px"; od.style.top = parseInt(od.style.top) + mry + "px"; mx = e.clientX; my = e.clientY; } } </script><br/> <div>softwhy.com/</div> </body> </html>
相關文章
- JS彈出視窗視窗的位置和大小JS
- 關閉網頁彈出提示視窗網頁
- js關閉視窗JS
- js如何在子視窗中關閉父視窗JS
- js檢測window.open()彈出視窗是否被關閉JS
- 彈出視窗
- jQuery彈出帶有遮罩視窗效果jQuery遮罩
- 關閉瀏覽器視窗彈出警告視窗程式碼例項瀏覽器
- Prism 彈出視窗
- js實現在彈出視窗中重新整理主視窗JS
- js實現window.open()彈出視窗和父視窗之間相互操作JS
- 彈出視窗程式碼
- 關閉瀏覽器視窗彈出提示程式碼例項瀏覽器
- Go Qt5 建立空白視窗、視窗居中及關閉視窗事件GoQT事件
- 討論關閉子視窗,重新整理父視窗(非模式視窗)模式
- 點選彈出帶有遮罩的視窗效果遮罩
- javascript如何在彈出視窗給父視窗賦值JavaScript賦值
- JavaScript視窗功能指南之建立彈出視窗 (轉)JavaScript
- 除錯彈出式視窗除錯
- 彈出視窗messagebox
- jQuery實現的點選彈出登陸視窗效果jQuery
- 廣告彈窗/小視窗程式碼
- Activity彈出視窗含意解釋
- 用函式控制彈出視窗函式
- fastadmin 彈出視窗的功能AST
- PyQt5 之關閉視窗QT
- 警惕遊戲融資視窗正在關閉遊戲
- javascript如何關閉當前視窗JavaScript
- Javascript自動關閉視窗(轉)JavaScript
- 彈出視窗螢幕(screen)實現關閉右上角的關閉按鈕事件(轉)事件
- <轉>“您檢視的網頁正在試圖關閉視窗。是否關閉此視窗”的遮蔽方法(JavaScript)網頁JavaScript
- js關閉當前頁面視窗的問題JS
- css實現的彈出視窗始終垂直水平居中效果CSS
- js window.open()實現列印,如何在關閉列印視窗時重新整理父視窗JS
- 彈出視窗指令碼生成器指令碼
- JavaScript+DIV製作彈出警告視窗效果JavaScript
- 關閉win10系統edge瀏覽器彈出廣告視窗的方法Win10瀏覽器
- Antd的message.error 彈出的視窗不會關閉的問題Error