div弹出对话框（动画效果）

最新推荐文章于 2022-07-01 10:20:20 发布
最新推荐文章于 2022-07-01 10:20:20 发布
阅读量857 收藏
点赞数
分类专栏： html JAVASCRIPT 文章标签： div function null iframe javascript class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljl_xyf/article/details/4788691
版权

JS代码

文件名称:my400800.cn.js

 

 var menuOC=function()
{
    this.menuPoint={prox:null,proy:null,proxc:null,proyc:null,width:null,height:null};
    this.menuObj=document.getElementById(arguments[0]);
    this.menuMask=null;
    this.canMove=false;
    this.getMaxWH();
    if(arguments[1])
    {
        this.canMove=arguments[1];
    }
    if(document.all)
    {
        //为IE添加遮罩iframe，用于遮盖页面上的select
        if(document.getElementsByTagName("select").length>0)
        {
            //寻找遮罩
            var masks=document.getElementsByTagName("iframe");
            for(var i=0;i<masks.length;i++)
            {
                if(masks[i].getAttribute("move_mask")=="move_mask")
                {
                    this.menuMask=masks[i];
                    break;
                }
            }
            if(this.menuMask==null)
            {
                with(this.menuObj)
                {
                    style.zIndex=(style.zIndex||0)<2?2:style.zIndex;
                }
                this.menuMask=document.createElement("iframe");
                with(this.menuMask)
                {
                    setAttribute("move_mask","move_mask");
                    src="javascript:''";
                    scrolling="no";
                    frameBorder="0";
                    style.position="absolute";
                    style.zIndex=this.menuObj.style.zIndex-1;
                    var curBorder=this.menuObj.currentStyle["borderWidth"];
                    style.top=parseInt(this.menuObj.currentStyle["top"])+parseInt(curBorder)+"px";
                    style.left=parseInt(this.menuObj.currentStyle["left"])+parseInt(curBorder)+"px";
                    style.width=parseInt(this.menuObj.currentStyle["width"])+2*parseInt(curBorder)+"px";
                    style.height=parseInt(this.menuObj.currentStyle["height"])+2*parseInt(curBorder)+"px";
                }
                this.menuObj.parentNode.appendChild(this.menuMask);
            }
        }
    }
};
menuOC.prototype={
    getStyle:function(obj,stylename)//获取控件实际样式
    {
        var curVal="";
        if (obj.currentStyle)
        {
            curVal=obj.currentStyle[stylename]
        }
        else
        {
            curVal=document.defaultView.getComputedStyle(obj, null)[stylename];
        }
        return curVal;
    },
    getMaxWH:function()//获取初始宽度高度
    {
        with(this.menuObj)
        {
            var width=getAttribute("maxwidth");
            if(width==null || width=="")
            {
                width=parseInt(this.getStyle(this.menuObj,"width"));
                setAttribute("maxwidth",width);
            }
            var height=getAttribute("maxheight");
            if(height==null || height=="")
            {
                height=parseInt(this.getStyle(this.menuObj,"height"));
                setAttribute("maxheight",height);
            }
            this.menuPoint.width=width;
            this.menuPoint.height=height;
        }
    },
    show:function()//显示
    {
        this.clearInterval();
        this.moveInit();
        with(this.menuObj.style)
        {
            display = "block";
            width = "1px";
            height = "1px";
        }
        if(this.menuMask!=null)
        {
            with(this.menuMask.style)
            {
                display = "block";
                width = "1px";
                height = "1px";
            }
        }
        var self=this;
        this.menuPoint.prox=setInterval(function(){self.openx(self.menuPoint.width,self.menuObj,self.menuMask);},10);
    },
    hidden:function()//关闭
    {
        this.clearInterval();
        if(this.menuObj.style.display == "block")
        {
            var self=this;
            this.menuPoint.proyc=setInterval(function(){self.closey(self.menuObj,self.menuMask);},10);
        }
    },
    openx:function(x,obj,mask)//横向打开
    {
        var cx = parseInt(obj.style.width);
        if(cx < x)
        {
            obj.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
            if(mask!=null)
            {
                mask.style.width=parseInt(obj.style.width)+2*parseInt(parseInt(this.getStyle(obj,"borderWidth")))+"px";
            }
        }
        else
        {
            clearInterval(this.menuPoint.prox);
            var self=this;
            this.menuPoint.proy=setInterval(function(){self.openy(self.menuPoint.height,self.menuObj,self.menuMask);},10);
        }
    },
    openy:function(y,obj,mask)//纵向打开
    {
        var cy = parseInt(obj.style.height);
        if(cy < y)
        {
            obj.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
            if(mask!=null)
            {
                mask.style.height=parseInt(obj.style.height)+2*parseInt(parseInt(this.getStyle(obj,"borderWidth")))+"px";
            }
        }
        else
        {
            clearInterval(this.menuPoint.proy);
        }
    },
    closey:function(obj,mask)//纵向关闭
    {
        var cy = parseInt(obj.style.height);
        if(cy > 0)
        {
            obj.style.height = (cy - Math.ceil(cy/5)) +"px";
            if(mask!=null)
            {
                mask.style.height=parseInt(obj.style.height)+2*parseInt(parseInt(this.getStyle(obj,"borderWidth")))+"px";
            }
        }
        else
        {
            clearInterval(this.menuPoint.proyc);
            var self=this;
            this.menuPoint.proxc=setInterval(function(){self.closex(self.menuObj,self.menuMask);},10);
        }
    },
    closex:function(obj,mask)//横向关闭
    {
        var cx = parseInt(obj.style.width);
        if(cx > 0)
        {
            obj.style.width = (cx - Math.ceil(cx/5)) +"px";
            if(mask!=null)
            {
                mask.style.width=parseInt(obj.style.width)+2*parseInt(parseInt(this.getStyle(obj,"borderWidth")))+"px";
            }
        }
        else
        {
            clearInterval(this.menuPoint.proxc);
            obj.style.display = "none";
            if(mask!=null)
            {
                mask.style.display=obj.style.display;
            }
        }
    },
    clearInterval:function()//取消循环
    {
        clearInterval(this.menuPoint.prox);
        clearInterval(this.menuPoint.proy);
        clearInterval(this.menuPoint.proxc);
        clearInterval(this.menuPoint.proyc);
    },
    /*-------------------------鼠标拖动---------------------*/
    moveInit:function()//初始化拖动
    {
        if(this.canMove)
        {
            //允许拖动
            this.startParam={x0:0,y0:0,x1:0,y1:0};
            this.moveable=false;
            var self=this;
            with(this.menuObj)
            {
                style.zIndex=(style.zIndex||0)<2?2:style.zIndex;
                οnmοusedοwn=function(){self.startMove();};
            }
            this.cancelBubble();
        }
    },
    cancelBubble:function()//为图层内部控件取消事件冒泡
    {
        var objTagName=["input","select","textarea","a","button"];
        var self=this;
        for(var i=0;i<objTagName.length;i++)
        {
            with(this.menuObj)
            {
                var objs=getElementsByTagName(objTagName[i]);
                for(var j=0;j<objs.length;j++)
                {
                    objs[j].οnmοusedοwn=function()
                    {
                        var evt=window.event || arguments[0];
                        if (evt.preventDefault)
                        {
                            evt.stopPropagation();
                        }
                        else
                        {
                            evt.cancelBubble = true;
                            evt.returnValue = false;
                        }
                    };
                }
            }
        }
    },
    movePoint:function(px,py)//坐标点
    {
        this.x=px;
        this.y=py;
    },
    getEvent:function()//获取事件对象
    {
        return window.event || arguments.callee.caller.caller.arguments[0];
    },
    getMousePoint:function(evt)//获取鼠标坐标
    {
        var pt=new this.movePoint(0,0);
        if(document.all)
        {
            pt.x=evt.clientX;
            pt.y=evt.clientY;
        }
        else
        {
            pt.x=evt.pageX;
            pt.y=evt.pageY;
        }
        return pt;
    },
    startMove:function()//开始移动
    {
        if(document.all)
        {
            this.menuObj.setCapture();
            this.menuObj.filters.alpha.opacity=50;
        }
        else
        {
            if(window.captureEvents)
            {
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
                this.menuObj.style.opacity=0.5;
            }
        }
        var evt=this.getEvent();
        with(this.getMousePoint(evt))
        {
            this.startParam.x0=x;
            this.startParam.y0=y;
        }
        with(this.menuObj)
        {
            this.startParam.x1=offsetLeft;
            this.startParam.y1=offsetTop;
        }
        this.moveable=true;
        var self=this;
        if(document.all)
        {    
            this.menuObj.οnmοusemοve=function(){self.Moveing(self.menuMask);};
            this.menuObj.οnmοuseup=function(){self.endMove();};
        }
        else
        {
            document.οnmοusemοve=function(){self.Moveing();};
            document.οnmοuseup=function(){self.endMove();};
        }
    },
    Moveing:function()//移动中
    {
        if(this.moveable)
        {
            var tmp_left,tmp_top,evt=this.getEvent();
            with(this.getMousePoint(evt))
            {
                tmp_left=(x+this.startParam.x1-this.startParam.x0);
                tmp_top=(y+this.startParam.y1-this.startParam.y0);
            }
                
            with(this.menuObj)
            {
                style.left=tmp_left+"px";
                style.top=tmp_top+"px";
                if(arguments[0])
                {
                    var curBorder=currentStyle["borderWidth"];
                    arguments[0].style.left=parseInt(style.left)+2*parseInt(curBorder)+"px";
                    arguments[0].style.top=parseInt(style.top)+2*parseInt(curBorder)+"px";
                }
            }
        }
    },
    endMove:function()//结束移动
    {
        if(document.all)
        {
            this.menuObj.releaseCapture();
            this.menuObj.filters.alpha.opacity=100;
        }
        else
        {
            if(window.releaseEvents)
            {
                window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
                this.menuObj.style.opacity=1;
            }
            document.οnmοusemοve=null;
            document.οnmοuseup=null;

        }
        this.moveable=false;
    }
};
var menuOC_obj=null;
function openBox()
{
    if(menuOC_obj==null)
    {
        menuOC_obj=new menuOC("activeBox",true);
    }
    menuOC_obj.show();
}
function closeBox()
{
    menuOC_obj.hidden();
}

 

 

 

调用代码

<!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=gb2312" />
<title>JS打开关闭移动层动画实例 - 星辰创想</title>
<script type="text/javascript" src="http://www.my400800.cn/js/www.my400800.cn.js"></script>
<style type="text/css">
a.title_close{position:absolute; right:3px; top:3px;display:block; width:32px; height:18px; overflow:hidden; background-position:0px 0px;}
.scrollBox{
    width:500px;
    height:200px;
    background:#EDF1F8;
    border: 1px solid #849BCA;
    overflow:hidden;
    position:absolute;
    left:200px;
    top:100px;
    cursor:move;
    filter:alpha(opacity=100);
    opacity:1;
    display:none;
}
.content{
    padding:10px;
}
</style>
</head>
<body>
<a href="#" onclick = "openBox();return false;">[打开层]</a>
<div id="activeBox" class="scrollBox">
<a href="#" class="title_close" οnclick="closeBox();return false;" title="关闭">关闭</a>
<div class="content">移动层<form action="javascript:void(0);"><input type="text" value="aa" /><select><option>1111</option><option>2222</option><option>3333</option></select><input type="submit" name="submitBotton" value="提交" /></form>11111111111</div>
</div>
<iframe width="0px" height="0px" scrolling="no" frameborder="0" src="about:blank" />
</body>
</html>

ljl_xyf
关注
专栏目录
只用一个div来做的弹跳小动画
web前端开发教程htmlcssjs
12-20 502
这是只用了一个div来做的小动画，纯粹利用CSS3的animation来完成，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，至于到底该怎么完成呢？让我们继续看下去。 利用伪元素 由于只使用了一个div，要同时达到正方形旋转与阴影缩放的效果，这里必须使用两个伪元素（before与after）来完成，严格来说，虽然只有一个div，但是却是把这个div当...
JavaScript写的一个DIV 弹出网页对话框
10-29
综上所述，这个JavaScript弹出对话框实现了自定义外观和基本交互功能，适合用作提示、操作指示或公告。它的可定制性和跨浏览器兼容性使其成为前端开发中的实用工具。为了进一步优化，可以考虑添加关闭按钮、动画效果...
DIV+CSS Loading动画弹出
10-26
刚刚毕业开始工作，昨天接触了一个工作，点击弹出DIV遮罩层中的Loading动画并且在5S后自动关闭，经过自己找多方资料终于解决，很简单的小东西，分享大家
纯css DIV弹出动画
书读百遍，其义自见
12-02 2666
/* Animation 微动画 基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28 */ /* css 滤镜 控制黑白底色gif的 */ .gif-black{ mix-blend-mode: screen; } .gif-white{ mix-blend-mode: multiply; } /* Animation css / [class=animation-] { animation-duration: .5s; animation-timing-function
Div弹框
深水鱼儿
08-31 973
在编写页面的时候，我们有时只是需要一个弹出框而不许要重新写一个页面的时候可以利用div弹框轻松应对。 jsp 代码：显示和隐藏弹出框 js 代码： // 打开弹出对话框1 var dlgType1 = 1; var dlg1 = null; function showPDC1(){ if(dlg1){ dlg1.show();
仿微信对话框效果，弹出带动画效果
12-01
仿微信对话框效果，弹出带动画效果，详细讲解请参考：http://blog.csdn.net/jakeyangchina/article/details/53423453
jquery实现点击弹出对话框
10-15
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理以及动画效果。本文将详细讲解如何使用 jQuery 实现点击按钮弹出对话框的功能。 首先，我们需要在 HTML 页面中创建一个隐藏的...
Jquery实现页面加载时弹出对话框代码
10-27
总结起来，利用jQuery的`$(document).ready()`和JavaScript的`alert()`函数，我们可以轻松实现页面加载时弹出对话框的效果。如果需要更高级的功能，如自定义样式和交互，可以结合使用jQuery UI的`dialog`插件。理解...
jQuery点击按钮弹出对话框窗口提示插件
06-10
本文将详细讲解如何使用jQuery实现一个点击按钮弹出对话框窗口提示的插件，以便用户在执行关键操作前进行确认或取消。 首先，我们需要引入jQuery库。在`index.html`文件中，添加以下代码片段来引入jQuery： ```...
模仿MSN弹出对话框效果.zip
最新发布
11-21
在这个项目中，开发者可能利用HTML来创建对话框的基础框架，用CSS来设定对话框的外观和动画效果，而JavaScript则负责处理用户的交互，如点击按钮时弹出对话框。 1. **HTML**：HTML（HyperText Markup Language）是...
纯CSS实现div弹出对话框
10-17
纯CSS实现div弹出对话框 可以应用于C#，.net 里面。 页面比较好看。
div弹出框js弹出框
06-25
div弹出框,js弹出框,轻松轻松定制
Div 弹出 DIV移动 遮罩层 Div对话框 Div窗口
12-21
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框，JS源代码
DIV实现弹出框
07-27
DIV实现弹出框, 实现登录， 有关闭按钮
web前端入门到实战：只用一个div来做的弹跳小动画
Ts3768的博客
07-01 474
这是只用了一个div来做的小动画，纯粹利用CSS3的animation来完成，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，至于到底该怎么完成呢？让我们继续看下去。由于只使用了一个div，要同时达到正方形旋转与阴影缩放的效果，这里必须使用两个伪元素（before与after）来完成，严格来说，虽然只有一个div，但是却是把这个div当作外框，让伪元素before作为旋转的正方形，让伪元素after作为阴影。...
div 弹框
weixin_44855207的博客
10-22 202
弹框 111 222 333 444 555...
div弹框
hualuozhijie的博客
12-08 157
LIGHTBOX EXAMPLE 可以根据自己要求修改css样式 点击这里打开窗口 This is the lightbox content. Close
Div弹出框
aaa2549769750的博客
05-25 361
1.Div实现弹出登录窗口 JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域，并在开始时将其隐藏，只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来。 具体详见代码：（注意，本div弹出层还不能被拖动，拖动效果有待进一步的实现） <html> <head> <title>jQueryDi...
DIV弹出框
iteye_4348的博客
11-18 180
比如在某个商城中，将一件商品加入购物车，按了按钮后弹出DIV框： function inputadd(goodsid){ document.getElementById("gidtemp").value=goodsid; //document.getElementById("ggnum").focus(); document.getElementById("showw...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值