社群

學習

工具庫

AI工具

休閒

繁体中文

目錄

Just a Test

什么时候能拖动我啊

首頁

web前端

js教程

兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽_javascript技巧

兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:02 PM

div ff

1 拖动+遮罩+移动+改变元素大小

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   <title>popper.w's code</title> 
     <style type="text/css"> 
    body{text-align:center} 
    #dd{ margin:50px auto} 
    #odiv{ width:400px; height:200px;border:1px dotted red; border:1px dashed green;} 
    #odiv ul{ list-style:none; text-align:left; width:150px; font-size:11px;} 
    #odiv ul li{height:25px; line-height:25px; border-bottom:1px dashed green;} 
    #ho{ width:150px; height:150px; border:1px dotted red} 
     </style> 
<script type="text/javascript"> 
function $ (o) { 
      return document.getElementById(o); 
} 
function XCreateElement(tagName,tagParent,attrs) 
{ 
    if(tagName&&arguments.length<2){tagParent=document.body;} 
        var oTemp=document.createElement(tagName); 
        if(attrs&&attrs.constructor==Object) 
        { 
        for(var o in attrs) 
            { 
                oTemp.setAttribute(o,attrs[o]); 
            } 
             
        } 
        tagParent.appendChild(oTemp); 
        return oTemp; 
} 
function XSetCss(obj,cssArgs){ 
    if(arguments.length==2) 
    {  
    if(cssArgs.constructor==Object){ 
    for(var o in cssArgs) 
            { 
                if(obj.style[o]!="undefiend") 
                { 
                obj.style[o]=cssArgs[o];             
                }          
            }  
        } 
    if(cssArgs.constructor==Array&&cssArgs.length==2){ 
                obj.style[cssArgs[0]]=cssArgs[1];             
     
    } 
    } 
} 
function XslideUp(obj,type,mX,num) { 
            if(!type){return;} 
            try{ 
                XSetCss(obj,[type,XgetOffset(obj)[type]-num+"px"]); 
                $("aa").innerHTML=XgetOffset(obj)[type]; 
            if(XgetOffset(obj)[type]>mX){             
            setTimeout(function(){XslideUp(obj,type,mX,num);},1);             
            } 
            else{ 
                XSetCss(obj,[type,mX]) 
            } 
            } 
            catch(e){} 
        } 
function XslideDown(obj,type,mX,num) { 
            if(!type){return;} 
            try{ 
                XSetCss(obj,[type,XgetOffset(obj)[type]+num+"px"]); 
                $("aa").innerHTML=XgetOffset(obj)[type]; 
            if(XgetOffset(obj)[type]<mX){             
            setTimeout(function(){XslideDown(obj,type,mX,num);},1);             
            } 
            else{ 
                XSetCss(obj,[type,mX]) 
            } 
            } 
            catch(e){} 
        } 
function XgetOffset (obj) { 
        return {height:obj.offsetHeight,width:obj.offsetWidth} 
} 
/*移动函数*/ 
/*o:element   l: left t:top*/ 
function Xmove(o,l,t){ 
o.style.position="absolute"; 
var a=1; 
var ol=parseInt(o.offsetLeft); 
var ot=parseInt(o.offsetTop); 
var iTimer=setInterval(function(){ 
   if(a==10) 
    { 
        Xtransp(o,"end"); 
        clearInterval(iTimer); 
    } 
   o.style.left=ol+a*(l-ol)/10+"px"; 
   o.style.top=ot+a*(t-ot)/10+"px"; 
   a++; 
},20); 
} 
/* 取消事件冒泡*/ 
function XcancleBubble(e) 
{ 
var e = window.event || e; 
if (e.preventDefault) e.preventDefault(); 
else e.returnValue = false; 
} 
/*设置透明度函数 o: dom 节点 mode: start:设置 开始   end 设置结束 , num: 透明度 1-100 内 整数*/ 
function Xtransp(o,mode,num){ 
           if(mode=="start"){ 
           
            if(document.all){ 
                o.style.filter = "Alpha(Opacity="+num+")"; 
            }else{ 
                o.style.opacity = num/100; 
            } 
            } 
        else { 
            if(document.all){ 
                o.style.filter = "Alpha(Opacity=100)"; 
            }else{ 
                o.style.opacity = 1; 
            } 
         
         
        } 
} 
function Xvisible(obj,start,end,step,interval,callback) 
        { 
            var st = start > end; 
            //步进start 
            st ? start-=step : start+=step;     
            //当start和end的关系发生变化时停止运行 
            if((start<end ^ st)){ 
                try 
                { 
                    obj.style.filter="alpha(opacity="+start+")";//IE 
                    obj.style.MozOpacity=start/100;//FF 
                } 
                catch(e){}; 
                setTimeout(function(){visible(obj,start,end,step,interval,callback);},interval);                 
            } 
            //执行回调         
            else         
                callback ? callback() : ""; 
        } 
var XgetScroll=function(){ 
    return{height:document.documentElement.scrollHeight,top:document.documentElement.scrollTop}; 
}; 
function getOffset(evt) 
{ 
var target = evt.target; 
if (target.offsetLeft == undefined) 
{ 
    target = target.parentNode; 
} 
var pageCoord = getPageCoord(target); 
var eventCoord = 
{ 
    x: window.pageXOffset + evt.clientX, 
    y: window.pageYOffset + evt.clientY 
}; 
var offset = 
{ 
    offsetX: eventCoord.x - pageCoord.x, 
    offsetY: eventCoord.y - pageCoord.y 
}; 
return offset; 
} 
function getPageCoord(element) 
{ 
var coord = {x: 0, y: 0}; 
while (element) 
{ 
    coord.x += element.offsetLeft; 
    coord.y += element.offsetTop; 
    element = element.offsetParent; 
} 
return coord; 
} 
function getEventOffset(evt) 
{ 
var msg = ""; 
if (evt.offsetX == undefined) 
{ 
    var evtOffsets = getOffset(evt); 
    msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY}; 
} 
else 
{ 
    msg={offsetX:evt.offsetX,offsetY:evt.offsetY}; 
} 
return msg; 
} 
function fDragStart(XEle) 
{ 
    switch(fCkBrs()) 
    { 
        case 3: 
            window.getSelection().removeAllRanges(); 
            break; 
                 
            default: 
            XEle.setCapture(); 
            break; 
    } 
} 
function fDragEnd(XEle) 
{ 
    switch(fCkBrs()) 
    { 
        case 3: 
            window.getSelection().removeAllRanges(); 
            break; 
                 
            default: 
            XEle.releaseCapture(); 
            break; 
    } 
} 
function fCkBrs() 
{ 
switch (navigator.appName) 
{ 
case 'Opera': return 2; 
case 'Netscape': return 3; 
default: return 1; 
} 
}  
function getOffsete (e,o) { 
    var e=e||window.event; 
    var eSrc=e.srcElement||e.target; 
    if(eSrc!=o){getOffsete(e.offsetParent)} 
} 
var DragZindexNumber=10; 
function Xdrag(obj,odrag){ 
var ex,xy,tag=0; 
var odrag=odrag?odrag:obj 
odrag.style.cursor="move"; 
if(tag==0){ 
odrag.onmousedown=function(e) 
    {    
        obj.style.zIndex=DragZindexNumber++; 
        Xtransp(obj,"start") 
        tag=1; 
        var e = e||window.event; 
        ex=e.clientX-obj.offsetLeft; 
        ey=e.clientY-obj.offsetTop; 
        var tempDiv=XCreateElement("div"); 
        XSetCss(tempDiv,{width:obj.offsetWidth+"px", 
                        height:obj.offsetHeight+"px", 
                        border:"1px dotted red", 
                        position:"absolute", 
                        left:obj.offsetLeft+"px", 
                        top:obj.offsetTop+"px", 
                        zIndex:999 
            }); 
        this.ele=tempDiv; 
        fDragStart(tempDiv); 
        document.body.onmousemove=function(e){ 
        if(tag==1) 
        {  
            var e=e||window.event; 
            XSetCss(tempDiv,{left:e.clientX-ex+"px",top:e.clientY-ey+"px"}) 
        } 
        else{if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)} 
        } 
       tempDiv.onmouseup=function(e) 
        { 
        var e=e||window.event; 
        fDragEnd(tempDiv); 
        obj.style.position="absolute"; 
        Xtransp(obj,"end"); 
        Xmove(obj,tempDiv.offsetLeft,tempDiv.offsetTop); 
        tempDiv.parentNode.removeChild(tempDiv); 
        tag=0; 
        } 
    } 
} 
} 
function Xcover(color,num){/*color:遮罩的背景色 eg: red/#cbcbcb, num:1-100内的整数*/ 
    var cDiv={}; 
    this.color=color; 
    this.num=num; 
    this.start=function(){ 
        cDiv=XCreateElement("div"); 
        XSetCss(cDiv, 
                { 
                    position:"absolute", 
                    top:"0px", 
                    left:"0px", 
                    zIndex:2, 
                    width:"0px", 
                    margin:"0px auto", 
                    background:this.color, 
                    filter:"Alpha(Opacity="+this.num+")", 
                    opacity:this.num/100 
                }) 
        cDiv.innerText="<h3>双击关闭"; 
        XslideDown(cDiv,"width",getCover().X-25,50); 
        XslideDown(cDiv,"height",getCover().H,30); 
        cDiv.ondblclick=function(){ 
            cDiv.parentNode.removeChild(cDiv); 
            } 
        }; 
    this.stop=function(){ 
            cDiv.parentNode.removeChild(cDiv); 
    }; 
} 
function getCover(){ 
    var m={} 
     m.H=screen.availHeight>document.documentElement.scrollHeight?screen.availHeight:document.documentElement.scrollHeight; 
     m.X=screen.availwidth>document.documentElement.scrollWidth?screen.availWidth:document.documentElement.scrollWidth; 
    return m; 
} 
</script> 
 
 
          <div id="aa"></div> 
       <div id="test"> 
        <h1 id="Just-a-Test">Just a Test</h1> 
        <input type="button" id="test1" value="XslideUp-H"> 
        <input type="button" id="test2" value="XslideDown-H"> 
        <input type="button" id="test3" value="XslideUp-W"> 
        <input type="button" id="test4" value="XslideDown-W"> 
        <input type="button" id="test5" value="Xcover"> 
        <input type="button" id="test6" value="Xmove"> 
        <input type="button" id="test7" value="Xdrag"> 
       </div> 
       <div id="odiv"> 
       <h1 id="什么时候能拖动我啊">什么时候能拖动我啊</h1> 
        <ul> 
            <li>Author:popper.w</li> 
            <li>Email:popper11@126.com</li> 
            <li>QQ:84101340</li> 
            <li>webSite: [url]www.hongwei2008.cn[/url]</li> 
        </ul> 
       </div> 
       <div id="ho"></div> 
 
 
<script type="text/javascript"> 
$("test1").onclick=function(){ 
XslideUp($("odiv"),"height",20,10); 
} 
$("test2").onclick=function(){ 
XslideDown($("odiv"),"height",200,10); 
} 
$("test3").onclick=function(){ 
XslideUp($("odiv"),"width",100,10); 
} 
$("test4").onclick=function(){ 
XslideDown($("odiv"),"width",400,10); 
} 
var m=new Xcover("yellow",50); 
$("test5").onclick=function(){ 
    // 
    //Xdrag($("test"),$("dd")); 
    m.start(); 
    // 
} 
$("test6").onclick=function(){ 
    Xmove($("ho"),50,100); 
} 
$("test7").onclick=function(){ 
XSetCss($("oTitle"),{height:"30px",lineHeight:"30px",textIndent:"20px",fontSize:"12px",background:"#cbcbcb"}) 
Xdrag($("ho")) 
Xdrag($("odiv"),$("oTitle")); 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

2 层打开效果

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css"> 
body{} 
#main{width:500px; margin:100px; height:500px;border:1px solid red} 
#test{border:1px solid red;display:none;width:10px;height:10px; background:yellow} 
</style> 
<script type="text/javascript"> 
/*  
popper.w code 
class: XopenDiv 
version: 1.0 
date: 2008-5-19 
*/ 
</script> 
<title>Code By popper.w</title> 
 
 
<input type="button" value="点击打开" id="bt"> 
<input type="button" value="点击关闭" id="bt1"> 
<div id="main"> 
                <div id="test"></div> 
</div> 
 
 
<script type="text/javascript"> 
function $ (o) { 
      return document.getElementById(o); 
} 
function XslideDown(obj,type,mX,num) { 
            if(!type){return;} 
                        try{ 
                             
                         var type1=type=="height"?"marginTop":"marginLeft"; 
                         var type2=type=="height"?"top":"left"; 
                                 XSetCss(obj,[type1,XgetOffset(obj)[type2]+"px"]); 
                                XSetCss(obj,[type,XgetOffset(obj)[type]+num+"px"]); 
                        if(XgetOffset(obj)[type]<mX){ 
                         setTimeout(function(){XslideDown(obj,type,mX,num);},10);                         
                        } 
                        else{ 
                                  XSetCss(obj,[type,mX]) 
                         } 
                        } 
                        catch(e){} 
                } 
function XslideUp(obj,type,mX,num) { 
            if(!type){return;} 
                        try{ 
                        var type1=type=="height"?"marginTop":"marginLeft"; 
                        var type2=type=="height"?"top":"left"; 
                                XSetCss(obj,[type1,XgetOffset(obj)[type2]+"px"]); 
                                XSetCss(obj,[type,XgetOffset(obj)[type]-num+"px"]); 
                        if(XgetOffset(obj)[type]>mX){                         
                         setTimeout(function(){XslideUp(obj,type,mX,num);},1);                         
                        } 
                        else{ 
                                  XSetCss(obj,[type,mX]) 
                                  obj.style.display="none"; 
                         } 
                        } 
                        catch(e){} 
                } 
function XSetCss(obj,cssArgs){ 
        if(arguments.length==2) 
        {  
          if(cssArgs.constructor==Object){ 
          for(var o in cssArgs) 
                        { 
                                if(obj.style[o]!="undefiend") 
                                { 
                                  obj.style[o]=cssArgs[o];                         
                                }                    
                        }  
                } 
         if(cssArgs.constructor==Array&&cssArgs.length==2){ 
                                obj.style[cssArgs[0]]=cssArgs[1];                         
          
         } 
        } 
} 
function XgetOffset (obj) { 
                 return { 
                                        height:obj.offsetHeight, 
                                        width:obj.offsetWidth, 
                                        top:parseInt((obj.parentNode.offsetHeight-obj.offsetHeight)/2), 
                                        left:parseInt((obj.parentNode.offsetWidth-obj.offsetWidth)/2) 
                                } 
} 
function XopenDiv(o){ 
                o.style.display="block"; 
                XslideDown(o,"width",400,10); 
            XslideDown(o,"height",400,10); 
} 
function XcloseDiv(o){ 
                XslideUp(o,"width",10,10); 
            XslideUp(o,"height",10,10); 
} 
$("bt").onclick=function(){ 
                XopenDiv($("test")) 
} 
$("bt1").onclick=function(){ 
             
        XcloseDiv($("test")) 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最佳圖形設置

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

刺客信條陰影：貝殼謎語解決方案

1 週前 By DDD

R.E.P.O.如果您聽不到任何人，如何修復音頻

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

在哪裡可以找到原子中的起重機控制鑰匙卡

1 週前 By DDD

顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡

7433

15

CakePHP 教程

1359

52

steam的賬戶名稱是什麼格式

76

11

win11激活密鑰永久

29

19

顯示更多

Related knowledge

css怎麼實作div缺一個角

css怎麼實作div缺一個角 Jan 30, 2023 am 09:23 AM

css實作div缺少一個角的方法：1、建立一個HTML範例文件，並定義一個div；2、給div設定寬高背景色；3、給需要刪除一角的div增加一個偽類，將偽類設定成跟背景色一樣的顏色，然後旋轉45度，再定位到需要去除的那個角落即可。

基於 ChatGPT API 的劃詞翻譯瀏覽器腳本實現

基於 ChatGPT API 的劃詞翻譯瀏覽器腳本實現 May 01, 2023 pm 03:28 PM

前言最近GitHub上有個基於ChatGPTAPI的瀏覽器腳本，openai-translator，短時間內star衝到了12k，功能上除了支援翻譯外，還支援潤飾和總結功能，除了瀏覽器插件外，還使用了tauri打包了一個桌面客戶端，那拋開tauri是使用rust部分，那瀏覽器部分實作還是比較簡單的，今天我們就來手動實作一下。 openAI提供的介面例如我們可以複製以下程式碼，在瀏覽器控制台中發起請求，就可以完成翻譯//範例constOPENAI_API_KEY="s

div盒模型是什麼

div盒模型是什麼 Oct 09, 2023 pm 05:15 PM

div盒模型是用於網頁佈局的模型，它將網頁中的元素視為一個個矩形的盒子，這個模型包含了四個部分：內容區域、內邊距、邊框和外邊距。 div盒模型的好處是可以輕鬆控制網頁佈局和元素之間的間距，透過調整內容區域、內邊距、邊框和外邊距的大小，可以實現各種不同的佈局效果，盒模型也提供了一些屬性和方法，可以透過CSS和JavaScript來動態地改變盒子的樣式和行為。

iframe和div有什麼不同

iframe和div有什麼不同 Aug 28, 2023 am 11:46 AM

iframe和div的不同是iframe主要用於引入外部內容，可以載入其他網站的內容或將一個網頁分割成多個區域，每個區域有自己的獨立的瀏覽上下文，而div主要用於分割和組織內容的區塊，用於佈局和样式控制。

div與span的差別有哪些

div與span的差別有哪些 Nov 02, 2023 pm 02:29 PM

差異有：1、div是一個區塊級元素，span是一個行內元素；2、div會自動佔據一行，span則不會自動換行；3、div用於包裹比較大的結構和佈局，span用於包裹文字或其他行內元素；4、div可以包含其他區塊級元素和行內元素，span可以包含其他行內元素。

如何將兩個div並排顯示

如何將兩個div並排顯示 Nov 01, 2023 am 11:36 AM

方法有：1、將兩個div元素設定為「float:left;」屬性；2、使用CSS的flex佈局可以輕鬆實現元素的並排顯示；3、使用CSS的grid佈局也可以實現元素的並排顯示。

jQuery技巧：掌握在div中新增標籤的方法

jQuery技巧：掌握在div中新增標籤的方法 Feb 23, 2024 pm 01:51 PM

標題：jQuery技巧：掌握在div中新增標籤的方法在網頁開發中，經常會遇到需要動態新增標籤到頁面中的情況。使用jQuery可以方便地操作DOM元素，實現快速的標籤添加功能。本文將介紹如何使用jQuery在div中新增標籤的方法，並附上具體的程式碼範例。 1.準備工作在使用jQuery之前，需要在頁面中引入jQuery庫，可以透過CDN連結引入，也可以下載到本

賈躍亭FF交付三輛車後面臨資金困境

賈躍亭FF交付三輛車後面臨資金困境 Sep 28, 2023 pm 07:57 PM

根据9月28日的消息，法拉第蔚来近期迎来了新任CEOMatthiasAydt。他在一封致全体股东的信中宣布，公司在过去一年里在旗舰车型FF91的研发方面取得了显著进展，目前已做好扩大产能的准备经过九年的不懈投资，法拉第未来已经投入约30亿美元（约合人民币219亿元）用于研发和发展。在今年第三季度，公司成功交付了三辆FF912.0FuturistAlliance，这标志着公司已经进入了营收阶段，形成了完整的经营闭环然而，虽然公司正迈向成立以来的一个关键阶段，但也清楚面临着一系列挑战，其中包括融资问

See all articles