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

2016-02-19 15:39 6 1 收藏

下面图老师小编要向大家介绍下javascript实现仿新浪信息提示效果,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

以下是引用片段:
!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

来源:https://www.tulaoshi.com/n/20160219/1610122.html

延伸阅读
标签: Web开发
不管是做网站还是一些应用系统,都免不了要用到一些弹出的效果,在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了网络上比较流行的仿XP关机效果的弹出功能,按目前的反应来说还是效果不错的,下面将此功能整一下儿,如果有需要大家可以直接使用到自己的网站或是应用系统中去。 不在详细的说明代码了,帖出代码之前需要说明一点儿的...
标签: Web开发
缓动,学名为Tween,缓冲移动的简称。要想页面内容切换起来舒服,就使用淡入淡出特效,要想让页面元素动起来自然,就要使用缓动效果。这两个混合起来,可以衍生多种特效的。感谢Flash开发人员为我们做了那么多先行研究,我们直接把它们拆出来装在各种菜单与相册中。我们先从最简单的东西做起,加速与减速。 既然是缓动,它就一定涉及以下概...
标签: Web开发
SCRIPT language=JAVASCRIPTfunction fade_in(){if (test.filters.alpha.opacity 100){test.filters.alpha.opacity += 10;clearTimeout(timer);var timer = setTimeout("fade_in()",150);timer;}}/SCRIPT
标签: Web开发
Untitled Document [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
前面一篇高仿launcher和墨迹左右拖动效果获得了很多朋友的好评,上一篇文章主要是通过自定义ViewGroup实现的,有点麻烦。今天用ViewPager这个类实现了同样的效果,这样代码更少,但是效果是一样的。ViewPager是实现左右两个屏幕平滑地切换的一个类,它是Google提供的。 使用ViewPager首先需要引入android-support-v4.jar这个jar包。具体ViewPa...

经验教程

595

收藏

59
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部