首页 / JAVASCRIPT / 兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3948字，纯文字阅读大概需要6分钟。

内容图文

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
     <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>双击关闭</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> 
</head> 
<body> 
           
        
        <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" /> 
        
        
       <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> 
        
        
</body> 
</html> 
<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 层打开效果

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

内容总结

以上是互联网集市为您收集整理的兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽全部内容，希望文章能够帮你解决兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/374335.html

来源：【匿名】

【上一篇】鼠标放上去触发一个javascript提示框效果代码【下一篇】javascript 怎么调用php方法

更多 ►

【兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽】教程文章相关的互联网学习教程文章

js 文件下载兼容ie【代码】

前置条件：后台接口返回二进制流文件一、设置前端请求的的responseType: ‘blob‘ 二、接收请求数据并调用下载var content = res.data // 接口返回的二进制流var filename = fileName.xls // 文件名，根据需要更改var blob = new Blob([content], {type: ‘application/vnd.ms-excel‘}) // 转化为blob对象 if (window.navigator.msSaveOrOpenBlob) { // IEnavigator.msSaveBlob(blob, filename) } else {var aTag = document.cre...

JavaScript无提示关闭当前页面窗口，兼容IE/Firefox/Chrome【代码】

Js 设置class，兼容ie,火狐的方式

var trs = document.getElementsByTagName("tr");trs[0].className="color2"; //设置css样式。不兼容火狐！兼容火狐，ie的写法为:var cls = trs[0].getAttribute(‘class‘); // 添加classtrs[0].setAttribute(‘class‘, cls + ‘ color3‘);原文：http://www.cnblogs.com/beenupper/p/3830236.html

JS 获取鼠标当前坐标兼容IE【代码】【图】

最近在弄一个小功能鼠标移动到当前位置就在旁边提示我想提示的内容所以直接拿过来直接获取移动鼠标的坐标然后直接在body中直接绘制一块提示的区域内容function A(e) {var x,y;//获取鼠标坐标x=e.pageX,y=e.pageY;//绘制提示内容$(‘body‘).append("<div style=‘position: absolute; top: ‘ + y + ‘px; left: ‘ + x+ ‘px;‘>xxxxxx！</div>"); }发现：在IE6下获取不到pageX及pageY获取的值是NAN所以我就通过查找：functio...

可兼容IE的获取及设置cookie的jquery.cookie函数方法_jquery

前言在开发过程中，因为之前有接触过Discuz，就直接拿其common.js里面的getcookie和setcookie方法来使用，做到后面在使用IE来测试的时候，发现这两个方法子啊IE下不起作用，就请教同事，这样就有了jquery.cookie.js文件的由来，里面的代码很少，我贴在下面，方便以后使用和研究吧。源码代码如下: /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) * Dual licensed under the MIT and GPL licenses: * h...

js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器_javascript技巧

直接上代码代码如下: var kingwolfofsky = { /** * 获取输入光标在页面中的坐标 * @param {HTMLElement} 输入框元素 * @return {Object} 返回left和top,bottom */ getInputPositon: function (elem) { if (document.selection) { //IE Support elem.focus(); var Sel = document.selection.createRange(); return { left: Sel.boundingLeft, top: Sel.boundingTop, bottom: Sel.boundingTop + Sel.boundingHeight }; } else { va...

javascript-jQuery('#cancel').removeAttr('disabled');这句话IE不能兼容，你能给出兼容IE系列，FF，chrome的程序？

jQuery('#cancel').removeAttr('disabled');这句话IE不能兼容，你能给出兼容IE系列，FF，chrome的程序？回复内容：jQuery(#cancel).removeAttr(disabled);这句话IE不能兼容，你能给出兼容IE系列，FF，chrome的程序？jQuery('#cancel').prop("disabled",false); 参考：http://blog.sina.com.cn/s/blog_655388ed01017cnc.html

javascript-jQuery('#confirm').removeAttr('disabled');这样的写法不能兼容IE系列，请给出兼容任何浏览器写法?

jQuery('#confirm').removeAttr('disabled');回复内容：jQuery(#confirm).removeAttr(disabled);jQuery(#confirm).attr(disabled,false);$(this).prop('disabled', false); 1、jQuery(#confirm).attr(disabled,false); 2、jQuery(#confirm)[0].disabled = false;

layui兼容ie浏览器吗【图】

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足...

如何解决VUEX兼容IE上的报错问题（详细教程）

下面我就为大家分享一篇解决VUEX兼容IE上的报错问题，具有很好的参考价值，希望对大家有所帮助。在IE 上使用Vuex的过程中，出现如下错误：SCRIPT5022: [vuex] vuex requires a Promise polyfill in this browser.解决方法：1、先安装babel-polyfillnpm install --save-dev babel-polyfill2、webpack.base.config.js下修改文件entry: {babel-polyfill: babel-polyfill,app: ./src/main.js}上面是我整理给大家的，希望今后会对大家有...

javascript实现图片预览和上传（兼容IE）代码分享

这篇文章主要为大家详细介绍了javascript图片预览和上传的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了js图片预览和上传的具体代码，供大家参考，具体内容如下输出图片的类型*/compress: function (f, quality, output_img_type) {var mime_type = "image/jpeg";if(output_img_type!=undefined && output_img_type=="image/png"){mime_type = "image/png";}createImageBitmap(f).then(functio...

原生JS实现《别踩白块》游戏（兼容IE）【图】

本文主要介绍了原生JS实现《别踩白块》游戏（兼容IE）的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧兼容了IE，每得20分就加速一次！！！效果如下：图（1）游戏初始图（2）游戏开始代码如下：<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><style>*{ margin: 0; padding: 0; } .box {margin: 50px auto 0 auto;width: 400px;height: auto;border: solid 1px #222;} #cont { width: 400px;height: 6...

JS密码强度验证(兼容IE,火狐,谷歌)【图】

大概样式: 源码: //=================HTML页面================= <body onload="InitCss();"> <form> <div> <table> <tr> <td> 密码: </td> <td> <input id="txtPassword" type="password" style="width: 130px;" maxlength="16" onfocus="InitCss();" onblur="ValidateInput(password,this.value)" onkeydown="validatePwdStrong(this.value);" /> </td> <td> <div id="tipPosition"> </div> </td> </tr> <tr> ...

JS实现iframe自适应高度的方法(兼容IE与FireFox)

本文实例讲述了JS实现iframe自适应高度的方法。分享给大家供大家参考，具体如下：之前一直被iframe自适应高度的问题困扰，很多JS代码在FF里面似乎就变成哑巴了。后来下面这段代码终于被我从万千号称兼容FF的代码堆中翻了出来。我已经用过了，真的好用。尤其是对于我这样的JS水平较低（真不好意思）的人来说，这段代码简单易懂，方便修改，只要把下面的代码复制粘贴到iframe所在页面的<body>标签里面，并且修改一下ID名就行了（注意...

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome【图】

今天为大家分享一下我自己制作的浏览器滚动条，我们知道用css来自定义滚动条也是挺好的方式，css虽然能够改变chrome浏览器的滚动条样式可以自定义，css也能够改变IE浏览器滚动条的颜色。但是css只能是改变IE浏览器的颜色，而且CSS不能做到改变火狐浏览器的样式和颜色。所以只能是通过JavaScript来实现了。也有插件可以做到。我分享一下我自己使用原生JavaScript实现的思路。先上个图看下效果：JavaScript实现的思路就是模拟浏览器自...

首页 / JAVASCRIPT / 兼容ie ff div 层 打开+关闭+ 拖动+遮罩+移动+动画改变高宽

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【兼容ie ff div 层 打开+关闭+ 拖动+遮罩+移动+动画改变高宽】教程文章相关的互联网学习教程文章

IE - 相关标签

兼容 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程

首页 / JAVASCRIPT / 兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽

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

【兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽】教程文章相关的互联网学习教程文章