HTML, 悬浮框

大致分内是:

行内元素有:heda   meat   title  lable  span  br  a   style  em  b  i   strong

块级元素有:body  from  select  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  cnter  div

行内块元素常见的有: img  input  td  

 

悬浮窗:

 //悬浮窗gzgzgzggzgzgzgzggzgzgzgzgzgzgzg

             window.onload=function(){

                 //写

                 var oneInner = document.createElement_x("div");

                 oneInner.setAttribute("style", "background:#FDECEA;position:absolute;width:200px;height:100px;cursor:pointer;");

 

                 var node = document.createElement_x("p");

                 node.setAttribute("style", "margin-top:30px; font-size: 15px;");

                 //node.setAttribute("name", "党风监督工作信息填报说明");

                 //node.setAttribute("href", "http://hq.cnpc/subs/sd/news/zytz/Pages/20170317_C873.aspx");

     

                 var node1 = document.createTextNode("工作提示:党风监督工作信息填报说明");

                 

                 oneInner.appendChild(node);

                 node.appendChild(node1);

 

 

/////////////////////////////////

                 var oneButton1 = document.createElement_x("input");

                 oneButton1.setAttribute("type", "button");

 

                 oneButton1.setAttribute("style", "position:absolute ; bottom:0;right:0;color:blue");

                 oneButton1.setAttribute("value", "前往查看");

                 node.appendChild(oneButton1);

//////////////////////////////////

                 var oneButton2 = document.createElement_x("input");

                 oneButton2.setAttribute("type", "button");

 

                 oneButton2.setAttribute("style", "position:absolute ;background:#CC0001 ;top:0; right:0;font-size: 15px;font-weight: bold;height:25px;color:white");

 

                 oneButton2.setAttribute("value", "关闭");

////////////////////////////////////////////////////////////////////

               

                 var oneButton = document.createElement_x("span");

               

                 oneButton.setAttribute("style", "position:absolute ;background:#CC0001 ; top:0;right:0;left:0;font-size: 15px;font-weight: bold;height:25px;color:white");

     

                 var node3 = document.createTextNode("重要通知");

                 oneButton.appendChild(node3);

                 oneButton.appendChild(oneButton2);

 

                 node.appendChild(oneButton);

                 

////////////////////////////////////////////////////

                 if (oneButton.style.cssFloat)

                 {

                     oneButton.style.cssFloat = "right"

                 }

                 else

                 { oneButton.style.styleFloat = "right" }

                 oneInner.appendChild(oneButton);

                 document.body.appendChild(oneInner);

 

                 //定时器

                 var a1a = setInterval(moves,150);

                 //函数

 

                 var x = 10;

                 var y = 10;

 

                 function moves(){

                     var tops = oneInner.offsetTop

                     var lefts = oneInner.offsetLeft

                     var rights = oneInner.offsetRight

 

 

                     if (lefts >= document.documentElement.clientWidth - oneInner.offsetWidth || lefts<0)

                     {

                         x=-x

                     }

 

                     if (tops >= document.documentElement.clientHeight - oneInner.offsetHeight || tops < 0)

                     {

                         y=-y

                     }

 

                     tops+=y;

                     lefts+=x;

 

                     oneInner.style.top=tops+"px"

                     oneInner.style.left=lefts+"px"

                 }

 

                 //悬停停止

                 oneInner.onmouseover=function(){

                     clearInterval(a1a);

                 }

                 //放手继续运动

                 oneInner.onmouseout=function(){

                     a1a =setInterval(moves,150);

                 }

                 //删除

                 oneButton2.onclick=function(){

                     document.body.removeChild(oneInner);

                 }

            

        //跳转下载

             oneButton1.onclick=function(){

                 //文档路径

                 window.open("党风监督工作信息填报说明.doc");

             }

 

             }

猜你喜欢

转载自blog.csdn.net/ganghaodream/article/details/88092260