学步园

    经常上qq空间的朋友一定对qq空间的个性编辑模块印象深刻,可以随意的拖动页面上的元素并且调动大小实现动态布局,当然我每次上csdn博客也会在右下角看见一个新闻窗口,这种效果的确很酷,那么我们也来实现一个吧.

     实现步骤:1.首先是动态创建一个类似这样的html结构:

<div style="height:200px;width:200px;overflow:hidden" id="a"><div id="head" style="background-color:blue;height:5%"><span id="move" style="width:90%;height:100%"></span><span id="close" style="overflow:hidden;white-space:nowrap;background-color:red">关闭</span></div><div id="body" style="width:100%;height:90%"></div></div>
 2.id为body的为你要放置内容的div容器,move是可移动的span,close是关闭这个窗口(准确说是层).

3.然后将事件绑定到这些对象上.具体看一下代码.

sx.activex.windowex={<br /> init:function(step,t,html){<br /> var a=document.createElement("div");<br /> var head=document.createElement("div");<br /> var move=document.createElement("span");<br /> var close=document.createElement("span");<br /> close.innerText="关闭";<br /> var body=document.createElement("div");<br /> head.appendChild(move);<br /> head.appendChild(close);<br /> a.appendChild(head);<br /> a.appendChild(body);<br /> a.style.height="200px";<br /> a.style.width="200px";<br /> a.style.overflow="hidden";<br /> a.style.border="1px red solid";<br /> head.style.backgroundColor="blue";<br /> head.style.height="5%";<br /> move.style.width="90%";<br /> move.style.height="100%";<br /> close.style.height="100%";<br /> close.style.overflow="hidden";<br /> close.style.whiteSpace="nowrap";<br /> close.style.backgroundColor="yellow";<br /> body.style.height="93%";<br /> body.style.width="100%";<br /> body.style.overflow="auto";<br /> a.style.position="absolute";<br /> close.style.position="absolute";<br /> close.style.cursor="hand";<br /> close.style.top=0+"px";<br /> close.style.right=0+"px";<br /> close.onclick=function(){<br /> window.event.cancelBubble=true;<br /> var q=a.offsetHeight;<br /> var h=window.setInterval(function(){<br /> if(Math.abs(q)>=0){<br /> a.style.height=q+"px";<br /> q=q-step;<br /> if(Math.abs(q)<step){<br /> //e.style.height=q+"px";<br /> window.clearInterval(h);<br /> //window.setTimeout(function(){<br /> //alert(this==window);<br /> close.style.cursor="normal";<br /> a.parentNode.removeChild(a);<br /> //a.style.lineHeight="0px"; </p> <p> //},10);<br /> }<br /> }else{<br /> window.clearInterval(h);<br /> //a.style.display="none";<br /> }<br /> },t);<br /> }<br /> move.onmousedown=function(){<br /> this.move=1;<br /> this.x=window.event.offsetX;<br /> //alert(this.x);<br /> this.y=window.event.offsetY;<br /> this.setCapture();<br /> }<br /> move.onmousemove=function(){<br /> this.style.cursor="move";<br /> if(window.event.clientX<=0 || window.event.clientY<=0 || window.event.clientX>=document.body.clientWidth || window.event.clientY>=document.body.clientHeight){return false;}<br /> if(this.move==1){</p> <p> this.parentNode.parentNode.style.left=window.event.clientX-this.x+"px";<br /> this.parentNode.parentNode.style.top=window.event.clientY-this.y+"px";<br /> this.setCapture();<br /> }<br /> }<br /> move.onmouseup=function(){<br /> if(this.move==1){<br /> this.move=0;<br /> //this.style.cursor="normal";<br /> this.releaseCapture();<br /> }<br /> }<br /> a.onmousemove=function(){<br /> if(this.move==1){<br /> if(window.event.clientX-this.offsetLeft<2 || window.event.clientY-this.offsetTop<2) return false;<br /> this.style.width=window.event.clientX-this.offsetLeft+"px";<br /> this.style.height=window.event.clientY-this.offsetTop+"px";<br /> close.style.right="0px";<br /> this.setCapture();<br /> }<br /> else{<br /> if(window.event.offsetX-this.offsetWidth>-6 && window.event.offsetY-this.offsetHeight>-6)<br /> this.style.cursor="nw-resize";<br /> else<br /> this.style.cursor="default";<br /> }<br /> }<br /> a.onmouseup=function(){<br /> if(this.move==1){<br /> this.move=0;<br /> this.releaseCapture();<br /> }<br /> }<br /> a.onmousedown=function(){<br /> if(this.style.cursor=="nw-resize"){<br /> this.move=1;<br /> this.setCapture();<br /> }<br /> }<br /> body.innerHTML=html;<br /> return a;<br /> }

代码也不复杂,主要是什么onmousedown,onmousemove,onmouseup的编写.我调整大小的原理当的你鼠标移动到层的右下角时,鼠标指针改变,这时按下鼠标并且移动时,会将当前层setcapture,移动鼠标层会随鼠标的位置而调整大小,松开鼠标releasecapture.

函数的参数step是你按下关闭时每次时间间隔移动的步数,t是时间间隔,html是你要插入到body层里的html代码.

一下给出一个调用例子:

<html><br /> <head><br /> <title>Untitled Document</title><br /> </head><br /> <body></p> <p> <mce:script src="kongjian.js" mce_src="kongjian.js"></mce:script></p> <p> <mce:script type="text/javascript"><!--<br /> var a=sx.activex.windowex.init(10,10,"<img src="1.jpg" mce_src="1.jpg" height=500 width=500>");<br /> //a.contentEditable=true;<br /> a.style.bottom="0px";<br /> a.style.right="0px";<br /> document.body.appendChild(a);</p> <p>// --></mce:script><br /> </body><br /> </html>

代码有bug的地方还请大家多多包涵.