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

好久没写博客了，最近一直在弄一个项目比较忙，呵呵。不过我还是感觉挺充实的，好了废话不多说了，前阵子我做了一个类似于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;
            262px;
        }
        .menu1box
        {
            position: relative;
            overflow: hidden;
            height: 22px;
            262px;
            text-align: left;
            top: 0px;
            left: 0px;
        }
        #menu1
        {
            position: absolute;
            top: 0;
            left: 2px;
            z-index: 1;
            443px;
        }
        #menu1 li
        {
            float: left;
            display: block;
            cursor: pointer;
            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;
            112px;
            margin-left: 1px;
        }
        .main1box
        {
            clear: both;
            margin-top: -1px;
            border: 1px solid #333;
            height: 300px;
            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; 90px; height:90px">
        <a href="#" style="top:5%; position:relative"><img src="" id="left_img" alt="" style="vertical-align:middle;top:-49%; left:-50%; 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; 90px; height:90px">
        <a href="#" style="top:5%; position:relative"><img src="" alt="" id="right_img" style="vertical-align:middle;top:-49%; left:-50%; 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();
    }

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

相关阅读:
pymysql 查询大量数据导致内存使用过高优化方案
docker-compose文件
Flask关于request一些方法和属性的整理
gitignore 文件中忽略项不起作用的解决方法
Django 时区
django-apscheduler定时任务
结队-贪吃蛇游戏-项目进度
团队-科学计算器-开发环境搭建过程
《团队-科学计算器-设计文档》
《结对-贪吃蛇-设计文档》

原文地址：https://www.cnblogs.com/jasonjiang/p/1874049.html