您正在使用IPV4(54.161.98.96)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 情人节 18
2022年 元宵节 19
2023年 元 旦 339
2022年 春 节 5
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    JavaScript动画打开半透明提示层
    内容摘要: !DOCTYPEhtmlPUBLIC'-//W3C//DTDXHTML1.0Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'htmlxmlns='http://www.w3.org/1999/xhtml'headmetahttp-equiv='Content-......
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <htmlxmlns="http://www.w3.org/1999/xhtml">

    <head>

    <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

    <title>DOM半透明提示层</title>

    <styletype="text/css">

    body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}

    #bodyL{

    float:left;

    width:84px;

    margin-right:2px;

    }

    a.od{

    width:80px;

    height:25px;

    line-height:25px;

    text-align:center;

    font-weight:bold;

    border:2pxsolid#849BCA;

    display:block;

    color:#547BC9;

    float:left;

    text-decoration:none;

    margin-top:2px;

    }

    a.od:link{

    background:#EEF1F8;

    }

    a.od:visited{

    background:#EEF1F8;

    }

    a.od:hover{

    background:#EEE;

    }

    a.od:active{

    background:#EEE;

    }

    #fd{

    width:500px;

    height:200px;

    background:#EDF1F8;

    border:2pxsolid#849BCA;

    margin-top:2px;

    margin-left:2px;

    float:left;

    overflow:hidden;

    position:absolute;

    left:0px;

    top:0px;

    cursor:move;

    float:left;

    }

    .content{

    padding:10px;

    }

    </style>

    </head>

    <body>

    <divid="bodyL">

    <ahref="#"class="od"onclick="show('fd');returnfalse;">

    [打开层]

    </a>

    <ahref="#"class="od"onclick="closeed('fd');returnfalse;">

    [关闭层]

    </a>

    </div>

    <divid="fd"style="display:none;filter:alpha(opacity=100);opacity:1;">

    <divclass="content">移动层</div>

    </div>

    <scripttype="text/javascript">

    varprox;

    varproy;

    varproxc;

    varproyc;

    functionshow(id){/*--打开--*/

    clearInterval(prox);

    clearInterval(proy);

    clearInterval(proxc);

    clearInterval(proyc);

    varo=document.getElementById(id);

    o.style.display="block";

    o.style.width="1px";

    o.style.height="1px";

    prox=setInterval(function(){openx(o,500)},10);

    }

    functionopenx(o,x){/*--打开x--*/

    varcx=parseInt(o.style.width);

    if(cx<x)

    {

    o.style.width=(cx+Math.ceil((x-cx)/5))+"px";

    }

    else

    {

    clearInterval(prox);

    proy=setInterval(function(){openy(o,200)},10);

    }

    }

    functionopeny(o,y){/*--打开y--*/

    varcy=parseInt(o.style.height);

    if(cy<y)

    {

    o.style.height=(cy+Math.ceil((y-cy)/5))+"px";

    }

    else

    {

    clearInterval(proy);

    }

    }

    functioncloseed(id){/*--关闭--*/

    clearInterval(prox);

    clearInterval(proy);

    clearInterval(proxc);

    clearInterval(proyc);

    varo=document.getElementById(id);

    if(o.style.display=="block")

    {

    proyc=setInterval(function(){closey(o)},10);

    }

    }

    functionclosey(o){/*--打开y--*/

    varcy=parseInt(o.style.height);

    if(cy>0)

    {

    o.style.height=(cy-Math.ceil(cy/5))+"px";

    }

    else

    {

    clearInterval(proyc);

    proxc=setInterval(function(){closex(o)},10);

    }

    }

    functionclosex(o){/*--打开x--*/

    varcx=parseInt(o.style.width);

    if(cx>0)

    {

    o.style.width=(cx-Math.ceil(cx/5))+"px";

    }

    else

    {

    clearInterval(proxc);

    o.style.display="none";

    }

    }

    /*鼠标拖动*/

    varod=document.getElementById("fd");

    vardx,dy,mx,my,mouseD;

    varodrag;

    varisIE=document.all?true:false;

    document.onmousedown=function(e){

    vare=e?e:event;

    if(e.button==(document.all?1:0))

    {

    mouseD=true;

    }

    }

    document.onmouseup=function(){

    mouseD=false;

    odrag="";

    if(isIE)

    {

    od.releaseCapture();

    od.filters.alpha.opacity=100;

    }

    else

    {

    window.releaseEvents(od.MOUSEMOVE);

    od.style.opacity=1;

    }

    }

    //functionreadyMove(e){

    od.onmousedown=function(e){

    odrag=this;

    vare=e?e:event;

    if(e.button==(document.all?1:0))

    {

    mx=e.clientX;

    my=e.clientY;

    od.style.left=od.offsetLeft+"px";

    od.style.top=od.offsetTop+"px";

    if(isIE)

    {

    od.setCapture();

    od.filters.alpha.opacity=50;

    }

    else

    {

    window.captureEvents(Event.MOUSEMOVE);

    od.style.opacity=0.5;

    }

    //alert(mx);

    //alert(my);

    }

    }

    document.onmousemove=function(e){

    vare=e?e:event;

    //alert(mrx);

    //alert(e.button);

    if(mouseD==true&&odrag)

    {

    varmrx=e.clientX-mx;

    varmry=e.clientY-my;

    od.style.left=parseInt(od.style.left)+mrx+"px";

    od.style.top=parseInt(od.style.top)+mry+"px";

    mx=e.clientX;

    my=e.clientY;

    }

    }

    </script><br/>

    </body>

    </html>

    上一篇:JavaScript按比例拖拉缩放 下一篇:JavaScript常用表单判断实例代码
    发布日期:2022/1/6
    手机扫二维码直达本页
    发布时间:13:41:46
    点击:144
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.1.0.10988 Build 21.12.28(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护

    Copyright©2000-2022