一、问题描述
在最近开发的asp.net项目使用jquery-powerfloat.js来实现网页上的悬浮层效果，当鼠标悬浮在网页的某个字符串上时显示悬浮层，移出该字符串不显示悬浮层。但是在IE7或者IE8浏览器上运行时，会导致页面卡住。
二、代码片段
1、主页面前端代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainForm.aspx.cs" Inherits="powerFloat.MainForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>主界面</title>
</head>
<body>
<form id="mainform" runat="server">
<div runat="server" id="addDiv">
</div>
</form>
</body>
</html>
2、主页面的后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace powerFloat
{
public partial class MainForm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsCallback)
{
InitData();
}
}
private void InitData()
{
Control ctl = this.LoadControl("AddWebUserControl.ascx");
ctl.ID = "Test";
addDiv.Controls.Add(ctl);
addDiv.Controls.Add(new LiteralControl("<br/>"));
}
}
}
3、悬浮层前端代码
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddWebUserControl.ascx.cs" Inherits="powerFloat.AddWebUserControl" %>
<style>
.dn {
display: none;
}
.shadow {
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 4);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 4);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 4);
}
.target_box {
width: 700px;
padding: 10px;
border: 1px solid #aaa;
background-color: #fff;
}
.target_list {
padding: 4px;
border-bottom: 1px dotted #ddd;
overflow: hidden;
_zoom: 1;
}
.target_list a {
width: 160px;
line-height: 20px;
margin-right: 5px;
padding: 1px;
color: #333;
font-size: 12px;
text-align: left;
text-decoration: none;
float: left;
}
.target_list .select1 {
width: 200px;
line-height: 20px;
margin-right: 5px;
padding: 1px;
color: red;
font-size: 20px;
text-align: left;
text-decoration: none;
float: left;
}
.target_more {
margin-top: -20px;
}
.target_fixed {
height: 25px;
padding: 1px;
position: fixed;
_position: adsolute;
top: 0;
right: 0;
}
.custom_container {
position: absolute;
background-color: rgba(0, 0, 0, 5);
background-color: #fff;
}
.custom_container img {
padding: 0;
position: relative;
top: -5px;
left: -5px;
}
</style>
<table>
<tr>
<td>总署查验要求18项</td>
<td>
<input type="hidden" runat="server" id="hdnClientId" />
<asp:Literal ID="txt_CHECK_REQUEST_TOTAL" runat="server"></asp:Literal>
</td>
</tr>
</table>
<asp:Literal runat="server" ID="targetBox"></asp:Literal>
<script src="scripts/jquery-1.4.1.js"></script>
<script src="scripts/jquery-powerFloat.js"></script>
<script>
$(function () {
var clientId = $("#Test_hdnClientId").val();
$(clientId).powerFloat( )
});
</script>
4、悬浮层后台代码
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace powerFloat
{
public partial class AddWebUserControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsCallback)
{
InitData();
}
}
private void InitData()
{
string checkRequestTotal = "000101010101001001";
txt_CHECK_REQUEST_TOTAL.Text = string.Format("<a id='{1}_trigger' href='javascript:;' rel='Test_targetBox'>{0}</a>", checkRequestTotal, this.ClientID);
hdnClientId.Value = "#" + this.ClientID + "_trigger";
char[] splitChar = checkRequestTotal.ToCharArray();
ArrayList arrayList = new ArrayList();
for(int i=0;i<splitChar.Length;i++)
{
arrayList.Add(splitChar[i].ToString());
}
string strHTML = @"
<div id='ABC$$_targetBox' class='shadow target_box dn'>
<div class='target_list'>
<a href='javascript:;' class='select{0}'>1.辐射探测</a>
<a href='javascript:;' class='select{1}'>2.预防性检疫处理</a>
<a href='javascript:;' class='select{2}'>3.检查病媒/有害生物</a>
</div>
<div class='target_list'>
<a href='javascript:;' class='select{3}'>4.动物临床检查</a>
<a href='javascript:;' class='select{4}'>5.检查残留剂</a>
<a href='javascript:;' class='select{5}'>6.检查车体/箱体</a>
</div>
<div class='target_list'>
<a href='javascript:;' class='select{6}'>7.检查包装</a>
<a href='javascript:;' class='select{7}'>8.核对品名</a>
<a href='javascript:;' class='select{8}'>9.检查标签/标识</a>
</div>
<div class='target_list'>
<a href='javascript:;' class='select{9}'>10.核对规格/型号</a>
<a href='javascript:;' class='select{10}'>11.核对产终地</a>
<a href='javascript:;' class='select{11}'>12.核对数量</a>
</div>
<div class='target_list'>
<a href='javascript:;' class='select{12}'>13.核对重量</a>
<a href='javascript:;' class='select{13}'>14.检查侵权</a>
<a href='javascript:;' class='select{14}'>15.检查外观品质</a>
</div>
<div class='target_list'>
<a href='javascript:;' class='select{15}'>16.检查夹藏/夹杂</a>
<a href='javascript:;' class='select{16}'>17.检查温度</a>
<a href='javascript:;' class='select{17}'>18.取样送检</a>
</div>
</div>
";
targetBox.Text = string.Format(strHTML, arrayList.ToArray()).Replace("ABC$$", this.ClientID);
}
}
}
三、源码下载
代码使用vs2012开发的。(链接：https://pan.baidu.com/s/1Y2c3yfC7oenSZwSw1Uh0VQ 提取码：iqr4 )
四、解决：由于jquery-powerfloat.js版本问题导致的，使用新的版本的就可以了。
jquery-powerfloat.js：链接：https://pan.baidu.com/s/1sKorCkN1UkmCFtf-6MNVxg 提取码：rh5n
