欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實現(xiàn)div的拖動并調(diào)整大小類似qq空間個性編輯模塊

 更新時間:2012年12月12日 10:33:35   作者:  
qq空間的個性編輯模塊可以隨意的拖動頁面上的元素并且調(diào)動大小實現(xiàn)動態(tài)布局;這種效果的確很酷,那么我們也來實現(xiàn)一個吧
經(jīng)常上qq空間的朋友一定對qq空間的個性編輯模塊印象深刻,可以隨意的拖動頁面上的元素并且調(diào)動大小實現(xiàn)動態(tài)布局,當然我每次上csdn博客也會在右下角看見一個新聞窗口,這種效果的確很酷,那么我們也來實現(xiàn)一個吧.

實現(xiàn)步驟:
1.首先是動態(tài)創(chuàng)建一個類似這樣的html結(jié)構(gòu):
復制代碼 代碼如下:

<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">關(guān)閉</span>
</div>
<div id="body" style="width:100%;height:90%"></div>
</div>

2.id為body的為你要放置內(nèi)容的div容器,move是可移動的span,close是關(guān)閉這個窗口(準確說是層).
3.然后將事件綁定到這些對象上.具體看一下代碼.
復制代碼 代碼如下:

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

this.parentNode.parentNode.style.left=window.event.clientX-this.x+"px";
this.parentNode.parentNode.style.top=window.event.clientY-this.y+"px";
this.setCapture();
}
}
move.onmouseup=function(){
if(this.move==1){
this.move=0;
//this.style.cursor="normal";
this.releaseCapture();
}
}
a.onmousemove=function(){
if(this.move==1){
if(window.event.clientX-this.offsetLeft<2 || window.event.clientY-this.offsetTop<2) return false;
this.style.width=window.event.clientX-this.offsetLeft+"px";
this.style.height=window.event.clientY-this.offsetTop+"px";
close.style.right="0px";
this.setCapture();
}
else{
if(window.event.offsetX-this.offsetWidth>-6 && window.event.offsetY-this.offsetHeight>-6)
this.style.cursor="nw-resize";
else
this.style.cursor="default";
}
}
a.onmouseup=function(){
if(this.move==1){
this.move=0;
this.releaseCapture();
}
}
a.onmousedown=function(){
if(this.style.cursor=="nw-resize"){
this.move=1;
this.setCapture();
}
}
body.innerHTML=html;
return a;
}

代碼也不復雜,主要是什么onmousedown,onmousemove,onmouseup的編寫.我調(diào)整大小的原理當?shù)哪闶髽艘苿拥綄拥挠蚁陆菚r,鼠標指針改變,這時按下鼠標并且移動時,會將當前層setcapture,移動鼠標層會隨鼠標的位置而調(diào)整大小,松開鼠標releasecapture.

函數(shù)的參數(shù)step是你按下關(guān)閉時每次時間間隔移動的步數(shù),t是時間間隔,html是你要插入到body層里的html代碼.
一下給出一個調(diào)用例子:
復制代碼 代碼如下:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>

<mce:script src="kongjian.js" mce_src="kongjian.js"></mce:script>

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

// --></mce:script>
</body>
</html>

代碼有bug的地方還請大家多多包涵.

相關(guān)文章

  • 自己寫的兼容ie和ff的在線文本編輯器類似ewebeditor

    自己寫的兼容ie和ff的在線文本編輯器類似ewebeditor

    最近寫了個在線的編輯器,類似ewebeditor那樣的,當然沒有人家那么強大,但是基本功能都有,而且還是兼容ie和ff的,需要的朋友可以參考下
    2012-12-12
  • 隨機顯示個性簽名的js代碼(兼容ie,firefox)

    隨機顯示個性簽名的js代碼(兼容ie,firefox)

    隨機顯示個性簽名的js代碼,主要是利用隨機數(shù)。需要的朋友可以參考下。
    2011-04-04
  • iphone手機桌面滑動效果使用css3實現(xiàn)

    iphone手機桌面滑動效果使用css3實現(xiàn)

    iphone手機桌面效果,因為用了css3樣式,只測試了谷歌瀏覽器,此效果比較不錯,有興趣的朋友可以多測試幾個瀏覽器
    2012-12-12
  • 一款雙向無縫+按鈕定位的焦點圖實現(xiàn)代碼

    一款雙向無縫+按鈕定位的焦點圖實現(xiàn)代碼

    做這個焦點圖弄了大個晚上,感覺挺暈的~發(fā)上來給大家踩一下吧 雙向無縫的原理很簡單實現(xiàn)起來也不難,主要頭痛的是在前后無縫與按鈕定位之間的配合問題,不過還好現(xiàn)在總算OK了。
    2010-11-11
  • js 模擬氣泡屏保效果代碼

    js 模擬氣泡屏保效果代碼

    用JavaScript實現(xiàn)的模擬氣泡屏保效果代碼,包括氣泡的碰撞效果,喜歡的朋友可以參考下。
    2010-07-07
  • Js獲取電腦屏幕的顏色色彩品質(zhì)(16位或32位)

    Js獲取電腦屏幕的顏色色彩品質(zhì)(16位或32位)

    Js獲取屏幕的顏色色彩品質(zhì),16位或32位,只需運行本代碼,即可得到你當前屏幕的顏色品質(zhì),現(xiàn)在一般都是32位了。
    2010-09-09
  • Js檢測判斷URL網(wǎng)址輸入是否正確

    Js檢測判斷URL網(wǎng)址輸入是否正確

    JavaScript檢測判斷用戶輸入的URL是否正確,簡單的正則規(guī)則,很準確的判斷URL的合法性,值得借鑒。
    2010-10-10
  • table 隔列(行)換色效果讓表格結(jié)構(gòu)更清淅

    table 隔列(行)換色效果讓表格結(jié)構(gòu)更清淅

    table 隔列換色效果,很實用的一款網(wǎng)頁特效代碼,用隔行換色來修飾表格,可讓表格結(jié)構(gòu)更清淅,也更加美觀,是一個十分流行的表格特效,在網(wǎng)頁中有利于提高用戶體驗,是一個很不錯的效果,需要的朋友可以參考下
    2012-12-12
  • HTML很火的浪漫愛心表白代碼

    HTML很火的浪漫愛心表白代碼

    程序員的你是不是也想送個特別的禮物。今天給大家分享一個HTML+CSS+jQuery實現(xiàn)的情侶浪漫愛心表白JS特效,視覺效果還是相當不錯!得此表白神器,程序猿也可以很浪漫!快去追你的女神吧,把這個告白愛心動畫發(fā)給你心愛的她!
    2023-01-01
  • 網(wǎng)頁計算器 一個JS計算器

    網(wǎng)頁計算器 一個JS計算器

    一個挺小的JavaScript網(wǎng)頁計算器,界面美化的我想還是不錯的,畢竟在沒有使用任何圖片修飾的情況下,很好看,而且功能挺實用,可以完成基本的數(shù)學算數(shù)運算
    2013-09-09

最新評論