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
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    AX 2012 Security Framework
    The new concept 'Model' in AX 2012
    How to debug the SSRS report in AX 2012
    Using The 'Report Data Provider' As The Data Source For AX 2012 SSRS Report
    Deploy SSRS Report In AX 2012
    AX 2012 SSRS Report Data Source Type
    《Taurus Database: How to be Fast, Available, and Frugal in the Cloud》阅读笔记
    图分析理论 大纲小结
    一文快速了解Posix IO 缓冲
    #转载备忘# Linux程序调试工具
  • 原文地址:https://www.cnblogs.com/chhuic/p/1640965.html
Copyright © 2011-2022 走看看