社区

学习

工具库

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邮箱登陆入口在哪里

7439

15

CakePHP 教程

1368

52

steam的账户名称是什么格式

76

11

win11激活密钥永久

31

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