使用jquery-powerfloat.js来实现的悬浮层效果在IE7或者IE8下运行,导致页面卡住

一、问题描述

    在最近开发的asp.net项目使用jquery-powerfloat.js来实现网页上的悬浮层效果,当鼠标悬浮在网页的某个字符串上时显示悬浮层,移出该字符串不显示悬浮层。但是在IE7或者IE8浏览器上运行时,会导致页面卡住。
    ![IE7下页面卡住截图](https://img-ask.csdn.net/upload/201911/12/1573549904_306764.png)

二、代码片段

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

u011503920
xmgchenchen 找到原因了,是因为jquery-powerfloat.js版本低了
2 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题