鼠标提示功能

该功能就是一篇文章中有很多关键词用户不明白是什么意思，那么在系统中创建一个字典，凡是在字典中的关键字，都要设置样式并下拉链接，点鼠标移动到该词上面后，显示出字典里的链接解释，如图所示

该功能主要用到的技术有，javascript,CSS以及ajax

1 首先先要创建字典，这个比较简装，不做详细记录，反正就是在数据库中存在字典与解释就OK了。

2 文章显示出来后所有和字典里的关键字能对应上的字符，都要加链接，设置样式。这是由JS来实现的代码如下：

function displays()
 {
 document.getElementById("txt").innerHTML=document.getElementById("txt").innerHTML.replace(/(咳嗽|dsfdf|产生)/gi,"<a href='#' title='$1' onmouseout=out() onmouseover=show('$1')>$1</a>");
 }

文件名为MounseDisplay.js

其中标红的是字典里的关键字，该段代码表示ID为txt的控件内（为一个层）的字符的html编码设置正则表达式格式，所有在正则表达式字符串内的字符，都要加链接，加title(鼠标移动到该词的样式)，鼠标移开的事件，因为该函数是独立的一个JS文件，所以要在所用到的页面加引用，代码如下

 <script language="javascript" type="text/javascript" src="http://www.cnblogs.com/js/MouseDisplay.js"></script>
   <script language="javascript" type="text/javascript" src="http://www.cnblogs.com/js/show.js"></script>

特别说明，这两段引用代码要加在body之下

这些仅仅使文章里的关键字出现链接，但要显示该关键字所指示出的解释内容，还要看show.js文件，代码如下 ：

 

function show(keys)
{
//先设置用来显示解释的层的位置为绝对位置
document.getElementById("Dic_Txt").style.position='absolute';
//再把该层的位置置为鼠标当前的位置（因为就是要显示到鼠标旁边）
            document.getElementById("Dic_Txt").style.top=window.event.y;
            document.getElementById("Dic_Txt").style.left=window.event.x+10;
            //异步传输数据
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.onreadystatechange=statechangeLoad;
    //打ViewDicTxt.aspx文件得到解释数据
   xmlhttp.open("GET","ViewDicTxt.aspx?Dic_Title="+encodeURI(keys),true);
   xmlhttp.send(null);

  
}

function statechangeLoad()
{
    if (xmlhttp.readystate==4)
    {
        if (xmlhttp.status==200)
        {
           
            //给页面的层付值（该词的解释数据）,并把该层置为可见
            document.getElementById("Dic_Txt").innerHTML=xmlhttp.responseText;
            document.getElementById("Dic_Txt").style.display="";
        }
    }
}

function out()
{
//层不可见
    document.getElementById("Dic_Txt").style.display="none"
}

先说简单的吧，函数out()就是把该层引荐掉

函数show(keys)里的keys是传入的关键字符,这个函数用到了ajax，因为打开页面ViewDicTxt.aspx用url传的值会是中文，会出现乱码现像，而到了页面ViewDicTxt.aspx后就会被系统屏掉，所以用到了编码和解码，encodeURI(keys)就是JS的编码。咱们再看ViewDicTxt.aspx文件的代码，ViewDicTxt.aspx文件的html代码除了第一行外，已经全部被删掉了，只有CS里的代码

 

 protected void Page_Load(object sender, EventArgs e)
        {
            //接到url传来的字符
            string DicTitle = Request.QueryString["Dic_Title"].ToString();
            //解码
            DicTitle = System.Web.HttpUtility.UrlDecode(DicTitle, System.Text.Encoding.GetEncoding("GB2312"));
            //得到数据源
            DataSet ds = new DataSet();
            ds = Business.Dictionary.GetList(" Dic_Title='" + DicTitle + "'");
            string a=ds.Tables[0].Rows[0]["Dic_Content"].ToString();
            //输出想要的结果
            Response.Write(ds.Tables[0].Rows[0]["Dic_Content"].ToString());

        }

 

当然了，这里面最重要的是解码