javascript实现仿新浪信息提示效果

自由鱼V

自由鱼V

2016-02-19 15:39

下面图老师小编要向大家介绍下javascript实现仿新浪信息提示效果,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!
以下是引用片段:
!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" xml:lang="zh-CN" lang="zh-CN"
 head
  meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" /
  title政策文件_中国电力工程造价信息网/title
  meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
  meta http-equiv="Content-Language" content="gb2312" /
  meta name="KeyWords" content="电力工程造价,价格信息,装材,设备,电力工程" /
  meta name="description" content="电力工程造价信息" /
  style type="text/css"
      *{
          margin:0;padding:0;
      }
  /style
 /head
 body
 
 div class="cecmbody" id="cecmpolicy"
  div class="leftClass"
  a href=http://homepage.yesky.com网页陶吧/a
  input type="button" value="点击这里" onclick="sAlert(''hello'');" /
  /div
  div class="rightClass"
  /div 
 /div
    script type="text/javascript" language="javascript"
//Author:Daviv
//Blog:http://blog.163.com/jxdawei
//Date:2006-10-27
//Email:jxdawei@gmail.com
   function sAlert(str){
   var msgw,msgh,bordercolor;
   msgw=400;//提示窗口的宽度
   msgh=100;//提示窗口的高度
   titleheight=25 //提示窗口标题高度
   bordercolor="#336699";//提示窗口的边框颜色
   titlecolor="#99CCFF";//提示窗口的标题颜色
   
   var sWidth,sHeight;
   sWidth=document.body.offsetWidth;
   sHeight=screen.height;
   var bgObj=document.createElement("div");
   bgObj.setAttribute(''id'',''bgDiv'');
   bgObj.style.position="absolute";
   bgObj.style.top="0";
   bgObj.style.background="#777";
   bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
   bgObj.style.opacity="0.6";
   bgObj.style.left="0";
   bgObj.style.width=sWidth + "px";
   bgObj.style.height=sHeight + "px";
   bgObj.style.zIndex = "10000";
   document.body.appendChild(bgObj);
   
   var msgObj=document.createElement("div")
   msgObj.setAttribute("id","msgDiv");
   msgObj.setAttribute("align","center");
   msgObj.style.background="white";
   msgObj.style.border="1px solid " + bordercolor;
      msgObj.style.position = "absolute";
            msgObj.style.left = "50%";
            msgObj.style.top = "50%";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.marginLeft = "-225px" ;
            msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
            msgObj.style.width = msgw + "px";
            msgObj.style.height =msgh + "px";
            msgObj.style.textAlign = "center";
            msgObj.style.lineHeight ="25px";
            msgObj.style.zIndex = "10001";
   
     var title=document.createElement("h4");
     title.setAttribute("id","msgTitle");
     title.setAttribute("align","right");
     title.style.margin="0";
     title.style.padding="3px";
     title.style.background=bordercolor;
     title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
     title.style.opacity="0.75";
     title.style.border="1px solid " + bordercolor;
     title.style.height="18px";
     title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
     title.style.color="white";
     title.style.cursor="pointer";
     title.innerHTML="关闭";
     title.onclick=function(){
          document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
     document.body.appendChild(msgObj);
     document.getElementById("msgDiv").appendChild(title);
     var txt=document.createElement("p");
     txt.style.margin="1em 0"
     txt.setAttribute("id","msgTxt");
     txt.innerHTML=str;
           document.getElementById("msgDiv").appendChild(txt);
            }
  /script
 /body
/html
展开更多 50%)
分享

猜你喜欢

javascript实现仿新浪信息提示效果

Web开发
javascript实现仿新浪信息提示效果

JS实现仿新浪信息提示效果

电脑网络
JS实现仿新浪信息提示效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用javascript实现的仿Flash广告图片轮换效果

Web开发
用javascript实现的仿Flash广告图片轮换效果

JavaScript仿Windows关机效果

Web开发
JavaScript仿Windows关机效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

javascript实现页面淡出效果

Web开发
javascript实现页面淡出效果

javascript实现的listview效果

Web开发
javascript实现的listview效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何在MAC设备之间快速转移SSH Keys

如何在MAC设备之间快速转移SSH Keys

MAC下设置Launchpad应用图标大小的方法

MAC下设置Launchpad应用图标大小的方法
下拉加载更多内容 ↓