在组织部考核项目中，有一个小需求：系统用户登录后，如果有消息，要对用户进行消息提示。原本做好了一个接收消息页面，所有未读的消息都可以在这个页面中查到，但是这样存在一个问题。用户登录之后，不能及时的提示用户是否有新消息。后来想想CSDN，是浏览器上边栏进行提示。何不做出类似的效果呢？

思路：

gif图片+DOM操作；

　　用户登录之后，判断是否有新消息，如果有新消息，则显示动态gif图片，否则将gif图片隐藏起来。

实现：

　　1、自己动手做动态图片。

　　这里详细的过程就不说了，都是一些PS常用的技巧。我提供的思路：从网上找一个小喇叭的图标，然后通过PS的帧制作gif图片。制作的效果图片如下：

　　２、设置gif在web页面中的位置

  <div id="header">            <div id="header-logo">
                <%--<img src="images/logo.gif" alt="logo" width="59" height="64" border="0" />--%>
            </div>
            <div id="header-title">
                考核项目<%=RoleName%>后台管理
            </div>
            <div id="header-info">
                <span style="margin-right: 50px; color: #fff;"><%=RoleName%>：<b><%=UserName%></b> 您好，欢迎登陆使用！</span>
                <span style="margin-right: 50px; color: #fff;"><a href="/Assessment/QueryMessage/EasyUIPersonNotice.aspx?CityID=<%=UnitsID%>" target="content">
                <img id="newsImg" alt="新消息" src="Images/重新做的喇叭.gif" title="您有新消息了~~~" height="20px;" style="text-align: center; vertical-align: middle" /></a></span>
                <span style="margin-right: 50px; color: #fff;">当前版本：1.0</span> <a href="javascript:Index.Open(‘welcome.html‘);" style="margin-right: 10px; color: #fff; font-weight: bold;"></a>
			 <a href="javascript:Index.Open(‘welcome.html‘);"style="margin-right: 10px; color: #fff; font-weight: bold;"></a><a href="Login.aspx">
                <img src="images/out.gif" class="middle" alt="安全退出" width="46" height="20" border="0" /></a>
            </div>
        </div>

　　３、根据后台变量控制前台gif的显隐

<script type="text/javascript">         function NewsNotice() {
            var newsCount="<%=NewsCount%>";
            if (newsCount > 0) {
		//如果有未读消息，显示图片
                document.getElementById("newsImg").style.display = "display";
            } else
            {
               //如果没有未读消息，不显示显示图片
                document.getElementById("newsImg").style.display = "none";
            }
        }
        window.onload = NewsNotice;
    </script>

　　４、后台C#代码：主要是获取未读消息的数量

 public partial class Welcome : System.Web.UI.Page	    {
	        EvaluationSystem.BLL.NoticeBLL noticeBLL = new NoticeBLL();
	
	        public string RoleName = "";
	        public string UserName = "";
	        public string UnitsID = "";
	        public int NewsCount ;
		      //判断是否有新的消息
	        NewsCount = noticeBLL.GetNoticeCount(UnitID).Tables[0].Rows.Count;
		}

小结：

　　其实，这个需求的关键在于思路，其次就是ＤＯＭ操作的相关知识，当然还有的就是一点课外的ＰＳ小知识，老爷子的话：积累！！！

项目经历——动态消息提示,布布扣,bubuko.com

项目经历——动态消息提示

原文：http://blog.csdn.net/zhangleilei4869/article/details/22214351