HTML5仿微信聊天界面、微信朋友圈实例代码资源-CSDN下载

60 浏览量 2020-12-30 04:28:47 上传评论收藏 226KB PDF 举报

资源推荐

资源详情

资源评论

HTML5仿微信聊天界面、微信朋友圈实例代码仿微信聊天界面、微信朋友圈实例代码

这几天使用H5开发了一个仿微信聊天前端界面，尤其微信底部编辑器那块处理的很好，使用HTML5来开发，虽说功能效果并

没有微信那么全，但是也相当不错了，可以发送消息、表情，发送的消息自动回滚定位到底部，另外可以对消息、图片、视频

有不同的右键处理提示，还有打赏、占屏等操作。

html代码片段：

<div class="js_dialog" id="J_Dialog_dashang" style="display: none;">

<div class="weui-dialog">

<i class="weui-xclose"></i>

<div class="weui-dialog__bd">

<div class="ws__popup-template">

<h2 class="hdTit">为喜欢的节目打赏</h2>

<div class="item flexbox">

<input class="ipt-txt align-l flex1" type="text" name="dschooseProgram" placeholder="选择打赏节目" readonly />

</div>

<div class="item item-area">

<textarea class="describe" name="content" placeholder="输入打赏语，30字以内（选填）"></textarea>

</div>

<div class="item item-gift" id="J__chooseGift">

<div class="gift flexbox selected" data-gift="001">

<label class="txt"><span>豪车</span><em class="time">霸屏50秒</em></label>

<span class="amount">￥<em>12</em> <i class="chkbox"></i></span>

</div>

<div class="gift flexbox" data-gift="002">

<label class="txt"><span>动人玫瑰</span><em class="time">霸屏20秒</em></label>

<span class="amount">￥<em>8</em> <i class="chkbox"></i></span>

</div>

</div>

</div>

</div>

<div class="weui-dialog__ft">

<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" style="background: #ff4400; border-radius: 4px; color: #fff;">支付

<span>￥<em class="moneyNum">12</em></span> 打赏</a>

</div>

</div>

</div>

Javascript代码片段：

/* ——聊天编辑器区域 */

var $editor = $(".J__editorText"), editor = $editor[0];

var $face = $(".emotion-area dd img");

$face.on("click", function(e){

if($(this).hasClass("face")){ //图像

var img = $(this)[0].cloneNode(true);

editor.focus();

setTimeout(function(){

var range, node;

if(document.selection && document.selection.createRange){

document.selection.createRange().pasteHTML(img);

}else if(window.getSelection && window.getSelection().getRangeAt){

range = window.getSelection().getRangeAt(0);

range.insertNode(img);

range.collapse(false);

var sel = window.getSelection();

sel.removeAllRanges();

sel.addRange(range);

}

}, 16);

}else if($(this).hasClass("del")){ //删除

editor.focus();

range = window.getSelection().getRangeAt(0);

range.collapse(false);

var sel = window.getSelection();

sel.removeAllRanges();

sel.addRange(range);

document.execCommand("delete");

}

});

//...格式化编辑器包含标签

editor.addEventListener("focus", function(evt) {

剩余6页未读，继续阅读

内容反馈

weixin_38663526

粉丝: 3

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip