zoukankan      html  css  js  c++  java
  • asp.net类似于QQ表情弹出框功能的实现方法

        前台介绍了《c# 类似于QQ表情弹出框功能的二种实现方法 ,这时是介绍C#在C/S下的实现办法,现在来说说B/S下的实现办法。该代码与前面的时为了实现C/S与B/S相互发送表情,实现通信的。

       B/S下实现相对于C/S下实现表情相对比较简单,主要是用一个页面和一个脚本文件。和前面一样,先贴出实现效果:

    从上面看到,可以加裁图片,也可以把图片插入到消息框中,并且当鼠标放在表情上时会看到其提示消息。

    下面来说下具体的实现过程

    首先建立 一个页面,页面里包括所有的表情。如果所示:

    FaceSheet.aspx(代码下载

    贴出其中一个表情的TD

    <td bgcolor="#ffffff" style="cursor: hand;" onmouseover="over(this);" onmouseout="out(this);">
                            <img src="../images/face/face01.gif" onclick="selface(this)" width="20" height="20" alt="微笑 :)" />
                        </td>

    这里定义 了onmouseover、onmouseout和onclick事件。onclick事件是为了失败当点击表情时把该表情插入到消息框,是通过脚本实现,脚本如下:

    代码
    function over(obj) {
            obj.style.background 
    = "#ffaa00";
        }

        
    function out(obj) {
            obj.style.background 
    = "#FFFFFF";
        }

        
    function selface(obj) {
            parent.InsertFace(obj); //插入表情
            parent.HideFaceSheet(); //隐藏表情框
        }

     插入表情到消息框的实现方法:

    代码
    // 函数: InsertFace
    //
     参数: obj
    //
     功能: 表情
    function InsertFace(obj) {
        
    var imgpath = obj.src;
        
    var imgalt = obj.alt;
        
    var txtEdit = $('#txtEdit');
        
    var strHtml = "<img src='" + imgpath + "' alt='" + imgalt + "'/>";
        
    var msg = $('#txtEdit').html();
        txtEdit.html(msg 
    + strHtml);
        txtEdit.focus();
    }

    这里要用到JQuery。因为消息框是一个textarea控件,要输入HTML代码。

    以上是主要的代码,整个项目的源代码可以从这里下载。   QQFaceWeb

    作者:chhuic

    出处:http://chhuic.cnblogs.com
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    el-select remote 远程搜索 多个共享一个options,options改变时输入框值不显示名称的问题
    vue 中数据共享的方式
    关于AI本质的思考
    人工智能——一场精妙的商业炒作
    相关下载链接
    只用两个问题通关《极限挑战皇家宝藏》最后一关
    常见图片格式详解
    改写《python基础教程》中的一个例子
    介绍四款windows下的神器
    实现windows批处理下的计时功能
  • 原文地址:https://www.cnblogs.com/chhuic/p/1640965.html
Copyright © 2011-2022 走看看