社群學習工具庫休閒

繁体中文

首頁 > web前端 > js教程 > 主體

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

WBOY

發布： 2016-05-16 19:02:48

原創

933 人瀏覽過

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="dd">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="oTitle">什么时候能拖动我啊</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需刷新才能执行]

相關標籤：

div ff

來源：php.cn

上一篇：JS暴虐查找法简洁版_javascript技巧下一篇：javascript import css实例代码_javascript技巧

本網站聲明

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

作者最新文章

什麼是 NullPointerException，如何修復它？

2024-10-22 09:46:29
從新手到程式設計師：您的旅程從 C 基礎知識開始

2024-10-13 13:53:41
使用 PHP 解鎖 Web 開發：初學者指南

2024-10-12 12:15:51
揭秘 C：為新程式設計師提供一條清晰簡單的道路

2024-10-11 22:47:31
釋放您的編碼潛力：絕對初學者的 C 編程

2024-10-11 19:36:51
釋放你內心的程式設計師：C 絕對初學者

2024-10-11 15:50:41
使用 C 自動化您的生活：適合初學者的腳本和工具

2024-10-11 15:07:41
PHP 變得簡單：Web 開發的第一步

2024-10-11 14:21:21
使用 Python 建立任何東西：釋放創造力的初學者指南

2024-10-11 12:59:11
編碼的關鍵：為初學者釋放 Python 的力量

2024-10-11 12:17:31

最新問題

**錯誤類型：無法迭代的'NoneType'物件** 我想使用ssh隧道來存取Mysql資料庫。不幸的是，此程式碼的體系結構似乎不支援我的查詢格式，因為該函數似乎與我的查詢格式不相容。 /Users/peter/PycharmProj...

來自於 2024-04-06 10:26:38

0

1

378

Angular 7 去除 SCSS 中的重複屬性 AngularSASS(.scss)剝離屬性。如何防止這種情況發生，以便我可以嵌入重複的屬性以實現跨瀏覽器相容性？要複製，請建立一個新的Angular7.2專案{"nam...

來自於 2024-04-04 23:28:54

0

1

1382

使用DISTINCT查詢和ORDER BY導致mySQL錯誤我正在嘗試對一列執行DISTICNT查詢，並按不在SELECT語句中的另一列進行排序。我收到此錯誤：查詢失敗SQLSTATE[HY000]：一般錯誤：3065表達式#1ORDERB...

來自於 2024-03-31 10:27:16

0

1

426

相關專題

更多>

熱門推薦

熱門教學

更多>

相關教學

熱門推薦

最新課程

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

1418359
php入門教程之一週學會PHP

4259803
JAVA 初級入門影片教學

2493528
小甲魚零基礎入門學習Python影片教學

504667
PHP 零基礎入門教學

859242

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板