【免费】打开关闭层并支持层拖动的JS+CSS特效资源-CSDN文库

共1个文件

html：1个

需积分: 0 15 浏览量 2008-12-31 18:25:48 上传评论收藏 2KB RAR 举报

在网页设计和开发中，动态效果常常用于提升用户体验，其中"打开关闭层"与"层拖动"是两种常见的交互式功能。这篇文章将详细讲解如何使用JavaScript（JS）和层叠样式表（CSS）实现这两种特效。我们来探讨"打开关闭层"的实现。在网页中，"层"通常指的是一个可以隐藏或显示的独立区域，常用于弹出窗口、对话框或者菜单等。使用JS，我们可以轻松控制层的显示和隐藏。基础的方法是通过改变元素的`style.display`属性，将其设置为`none`来隐藏，设置为`block`或`inline`来显示。此外，可以结合CSS动画，使得层的开关过程更具有视觉吸引力，例如渐显渐隐效果。 ```javascript function toggleLayer(layerId) { var layer = document.getElementById(layerId); if (layer.style.display === "none") { layer.style.display = "block"; } else { layer.style.display = "none"; } } ``` 接下来，我们讨论"层拖动"功能。实现层拖动主要涉及鼠标事件处理和坐标计算。当用户按下鼠标并在层上移动时，我们需要记录鼠标的初始位置和层的初始位置，然后根据鼠标移动的距离来更新层的位置。这需要监听`mousedown`、`mousemove`和`mouseup`事件。 ```javascript function makeDraggable(layerId) { var layer = document.getElementById(layerId); layer.style.position = "absolute"; var startX, startY, layerX, layerY; function handleMouseDown(e) { startX = e.clientX; startY = e.clientY; layerX = parseInt(layer.style.left) || 0; layerY = parseInt(layer.style.top) || 0; document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); } function handleMouseMove(e) { layer.style.left = (layerX + e.clientX - startX) + 'px'; layer.style.top = (layerY + e.clientY - startY) + 'px'; } function handleMouseUp() { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); } layer.addEventListener('mousedown', handleMouseDown); } ``` 在这个例子中，`handleMouseDown`、`handleMouseMove`和`handleMouseUp`分别对应鼠标按下、移动和释放的处理函数，它们共同实现了层的拖动效果。至于`codefans.net`这个文件名，可能是提供示例代码或资源的网站，它可能包含了实现这些特效的完整代码。在实际应用中，开发者可以从这样的资源库获取灵感或直接引用代码，以快速实现类似的效果。总结来说，"打开关闭层并支持层拖动的JS+CSS特效"涉及到JavaScript的DOM操作、事件监听以及CSS的样式控制。通过理解和实践这些技术，开发者能够创建更加动态和交互式的网页元素，提升用户的浏览体验。

资源详情

资源评论

资源推荐

收起资源包目录

JS+CSS特效.rar （1个子文件）

codefans.net

动态打开关闭层并实现层的拖动

demo.html 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>超酷动态打开关闭层:Codefans.net</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; /*filter:alpha(opacity=50);*/ } .content{ padding:10px; } </style> </head> <body> <div id="bodyL"> <a href="#" class="od" onclick = "show('fd');return false;"> [打开层] </a> <a href="#" class="od" onclick = "closeed('fd');return false;"> [关闭层] </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; } //alert(mx); //alert(my); } } document.onmousemove = function(e){ var e = e ? e : event; //alert(mrx); //alert(e.button); 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> </body> </html>