类似QQ表情的功能，包括动态绑定图片

关注

转载最新推荐文章于 2026-04-29 09:40:35 发布 587 阅读 AI 写同款· GEO 优化 ›

从交流到直流：深入解析整流桥的设计与应用本文深入解析整流桥的设计与应用，详细介绍了整流桥如何将交流电转换为直流电的工作原理及其在电子电路中的关键作用。通过实际案例和选型指南，帮助工程师避免常见设计错误，提升电源系统的效率和可靠性。阅读详情

好久没写博客了，最近一直在弄一个项目比较忙，呵呵。不过我还是感觉挺充实的，好了废话不多说了，前阵子我做了一个类似于QQ表情的功能，刚开始以为挺简单的，后来因为自己的前台知识比较匮乏，以至于进展比较缓慢，不过现在终于也完成了，现在分享下代码，以供朋友们借鉴。（本例使用的数据库是Oracle）

首先一个页面是关于输入信息的，code：

通过点击“添加图标”的img按钮来打开图标页。图标页是一个嵌入到该页面的iFrame页。code：

接着是关于“题目”下的div的一些函数，code：

//点击“添加图标”按钮时记录当前焦点的位置，并在该位置上插入图标

function showface(str)
{
mouse_loc=str;
var oText =document.getElementById(mouse_loc);
oText.focus();//获得焦点
document.getElementById("spacial").style.display="none";
var ei = document.getElementById("face");
ei.style.top = event.clientY + oText.offsetHeight+15 + document.body.scrollTop+ "px";//控制鼠标的位置Y坐标,始终显示在div的下面
ei.style.left = event.clientX + 2 + "px";//控制鼠标的位置X坐标
ei.style.display="inline";
}

//在div中插入图片
function ExcuteInsertImg(strUrl,imgType,imgWidth,imgHeight)
{
    var oText =document.getElementById(mouse_loc);
    oText.focus();
    var sel=document.selection.createRange(); //创建对象
    if(imgType == "1"){
        sel.pasteHTML("<p><img src='"+ strUrl +"' width='"+ imgWidth +"' height='"+ imgHeight +"' /></p>")
    }
    else{
        sel.pasteHTML("<img src='"+strUrl+"' width='"+ imgWidth +"' height='"+ imgHeight +"'/>");//转换成Img对象
    }
    document.getElementById("face").style.display = "none";//点击完成后隐藏
}

这就是这个页面的大体code了。

下面是整个图标页面的code：

前台code：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="exam_face_temp.aspx.cs" Inherits="exam_exam_face_temp" %>

<!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">
<head runat="server">
    <title>图片管理</title>
    <style type="text/css">
        body, div, ul, li
        {
            margin: 0 auto;
            padding: 0;
        }
        body
        {
            font: 12px "宋体";
            text-align: center;
        }
        a:link
        {
            color: #00F;
            text-decoration: none;
        }
        a:visited
        {
            color: #00F;
            text-decoration: none;
        }
        a:hover
        {
            color: #c00;
            text-decoration: underline;
        }
        ul
        {
            list-style: none;
        }
        .main
        {
            clear: both;
            padding: 8px;
            text-align: center;
        }
        /*第二种形式*/#tabs1
        {
            text-align: left;
            width: 262px;
        }
        .menu1box
        {
            position: relative;
            overflow: hidden;
            height: 22px;
            width: 262px;
            text-align: left;
            top: 0px;
            left: 0px;
        }
        #menu1
        {
            position: absolute;
            top: 0;
            left: 2px;
            z-index: 1;
            width: 443px;
        }
        #menu1 li
        {
            float: left;
            display: block;
            cursor: pointer;
            width: 145px;
            text-align: center;
            line-height: 21px;
            height: 21px;
        }
        #menu1 li.hover
        {
            background: #fff;
            border-left: 1px solid #333;
            border-top: 1px solid #333;
            border-right: 1px solid #333;
            width: 112px;
            margin-left: 1px;
        }
        .main1box
        {
            clear: both;
            margin-top: -1px;
            border: 1px solid #333;
            height: 300px;
            width: 300px;
        }
        #main1 ul
        {
            display: none;
        }
        #main1 ul.block
        {
            display: block;
        }
        #enlarge_images img
        {
         vertical-align:middle;
         }
        #enlarge_images_right img
        {
         vertical-align:middle;
         }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        图片名称： <asp:TextBox ID="txt_Pic" runat="server" Width="100px" Height="15px"></asp:TextBox> 
        <asp:ImageButton ID="btnSearch" runat="server" Alt="查询图标" ImageUrl="~/images/09.gif"
            Width="22" Height="22" OnClick="btnSearch_Click" /> 
        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/gif_48_003.gif"
            AlternateText="自定义图标" OnClientClick="openUs();" Width="21" Height="21" /> 
        <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/Close-72x72.png"
            AlternateText="关闭窗口" Width="20" Height="20" OnClientClick="closewindow();" />
    </div>
    <div id="tabs1">
        <div class="menu1box">
            <ul id="menu1">
                <li class="hover" onclick="setTab(1,0)"><a href="#">小图标</a></li>
                <li onclick="setTab(1,1)"><a href="#">大图标</a></li>
            </ul>
        </div>
        <div class="main1box">
            <div class="main" id="main1">
                <ul class="block">
                    <li>
                        <asp:Label ID="lb_200" runat="server" Text="Label"></asp:Label></li></ul>
                <ul>
                    <li>
                        <asp:Label ID="lb_300" runat="server" Text="Label"></asp:Label></li></ul>
            </div>
        </div>
    </div>
    <div id="enlarge_images" style="background-color:White; border:1px solid blue; position:absolute; float:left; display:none; width:90px; height:90px">
        <a href="#" style="top:5%; position:relative"><img src="" id="left_img" alt="" style="vertical-align:middle;top:-49%; left:-50%; width:80px" onload="imgOnLoad(this);"/></a>
    </div>
    <div id="enlarge_images_right" style="background-color:White; border:1px solid blue; position:absolute; float:right; display:none; width:90px; height:90px">
        <a href="#" style="top:5%; position:relative"><img src="" alt="" id="right_img" style="vertical-align:middle;top:-49%; left:-50%; width:80px" onload="imgOnLoad(this);" /></a>
    </div>
    </form>
</body>
</html>

后台code主要介绍下动态绑定数据的code：

private void binBigImg()
    {
        string sql = "select * from exam.ex_q_images_list where IMAGE_SIZE_TYPE=1 order by image_times";
        DataTable dt = conn.getDataTable(sql);
        StringBuilder sb = new StringBuilder();
        int lngCols = 12;
        sb.Append("<table id=\"tb_max\" border=\"1px\" style=\"border:solid 1px #d7d7d7\" cellspacing=\"0\" cellpadding=\"0\">\n");
        if (dt != null && dt.Rows.Count > 0)
        {
            for (int i = 0; i <= dt.Rows.Count - 1; i++)
            {
                #region Application
                string trans = ".." + dt.Rows[i]["image_server_path"].ToString() + dt.Rows[i]["image_file_name"].ToString();
                string n = trans;
                string type = dt.Rows[i]["image_size_type"].ToString();
                string imgWidth = dt.Rows[i]["image_width"].ToString();
                string imgHeight = dt.Rows[i]["image_hight"].ToString();
                #endregion

                if (i + 1 == 1)
                {
                    sb.Append("<tr>");
                }

                if ((i + 1) % lngCols != 0)
                {
                    sb.Append("<td align=\"left\"><img src=\"" + n + "\" alt=\"" + dt.Rows[i]["image_name"].ToString() + "\" onmouseover=\"up('" + trans + "'," + num + ")\" onmouseout=\"onMouseout('"+ trans +"')\" onmousedown=\"selface('" + trans + "','"+ type +"','"+ imgWidth +"','"+ imgHeight +"')\" width=\"20px\" height=\"20\" /></td>\n");
                }
                else
                {
                    sb.Append("<td align=\"left\"><img src=\"" + n + "\" alt=\"" + dt.Rows[i]["image_name"].ToString() + "\" onmouseover=\"up('" + trans + "'," + num + ")\" onmouseout=\"onMouseout('" + trans + "')\" onmousedown=\"selface('" + trans + "','"+ type +"','"+ imgWidth +"','"+ imgHeight +"')\" width=\"20px\" height=\"20\" /></td>\n");
                    sb.Append("</tr>");
                }
                num++;
                if (num == 14)
                {
                    num = 0;
                }

            }
        }
        sb.Append("</tr></table>");
        this.lb_300.Text = sb.ToString();
    }

好了，这个功能也算可以实现了，呵呵。