完美实现仿QQ空间评论回复特效

2024-09-29 16:09:16

评论回复是个很常见的东西，但是各大网站实现的方式却不尽相同。大体上有两种方式

像优酷这种最常见，在输入框中@要回复的人，这种方式下，用户可以修改@。

新浪微博则是在这个基础上，弹出好友菜单。这种方式的好处是不需要任何js,css处理兼容。

像qq空间这种，对回复的人整个删除。本屌感觉这种方式比较好，但这种方式有些兼容性上的细节，这个后面会详细说明。

事实上，qq空间的这种实现在效果上是兼容了ie和现代浏览器的，做的非常好。上面是chrome

ie8

ie7

ie6就不上图片了，太卡了，都懂得，最后本屌会附上最终例子的，当然也兼容ie6。

下面就说说怎么实现的。

先看看qq空间是怎么做的

chrome

上面可以看到，qq空间是在button中加上文字，这样在删除的时候对被回复的用户名就能整个删除了。

不过这样做还不够，首先是样式，需要把button设置成inline-block，

消除button默认的透明背景，边框，当然还有padding,margin设为0

代码如下:

button{ border: 0; background:none; }

这时在ie6,7中插入会发现，似乎还存在padding,而且还很大

所以还需要加上overflow: visible;

另外属性contenteditable设置成为false,否则光标会跳到button里面，

然后在ie8下会发现，输入的时候如果有回车，然后在依次删除的过程中，会发现button标签删不掉，光标会跑到button标签前面，而且再次按右光标键或用鼠标点击button标签右边都无法让光标跑到button标签右边。事实上，qq空间在ie8中也有这个问题

ie8

而在ie6,7下，就没有这个问题

ie7

ie6

这里针对ie8需要对文本框绑定keydown事件回调check_comment,对ie6,7绑定了也没有问题，这里就统一的对ie绑定。

function getPositionForTextArea(ctrl) { //获取光标位置
      var CaretPos = 0;
      if(document.selection) {
        ctrl.focus();
        var Sel = document.selection.createRange();
        var Sel2 = Sel.duplicate();
        Sel2.moveToElementText(ctrl);
        var CaretPos = -1;
        while(Sel2.inRange(Sel)){
          Sel2.moveStart('character');
          CaretPos++;
        }
      }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){
        CaretPos = ctrl.selectionStart;
      }
      return (CaretPos);
    }
      vm.check_comment=function(e,i){
        var a=getPositionForTextArea($('reply'+i));
        if(e.keyCode==8&&a<3){
          var pat = new RegExp("^<p><button .*?>.*?</button> </p>$",'i');
          if(pat.test(this.innerHTML))
            this.innerHTML='';
        }
      };

光标位置<3表明光标前面就是button标签了，这时就可以清空输入框了。注意这里为了严谨，用正则表达式验证是不是button标签.

另外在正则表达式中button标签外包裹p标签，是因为ie在按回车换行时，会默认自动对前面的行包裹p标签。当然，一开始在输入框也要在button标签外包裹p标签。

题外话

qq空间在ff上用的是img标签

之前一直以为qq空间在现代浏览器上统一用的是img标签，写的时候才发现在chrome中用的是button标签，于是就在chrome下试了一下插入img标签，发现怎么也弄不掉边框，而且删除的时候，绑定中光标位置的判断也会和ie不一致，因为现代浏览器换行默认插入<br>,于是索性对chrome也用button标签。

另外在我的例子中，ff中插入button标签的话，输入框不容易获得焦点。本屌也懒得去改了,仍然是在ff中插入img标签，对应的keydown回调

        if(!!-[1,]&&e.keyCode==8&&$('reply'+i).childNodes.length==2){//ff
          this.innerHTML='';
          return;
        }

只用判断输入框的子节点个数就可以了。

最终效果

chrome

ie8

ie7

ie6

附上例子下载

以上所述就是本文的全部内容了，希望大家能够喜欢。

利用“多说”制作留言板、评论系统

留言板和评论系统在网站建设中会经常用到,今天为大家介绍如何利用多说来为自己的网站制作留言板.评论系统!注意以下只是介绍一下简单的创建设置,更多功能大家可以自己去探索! 1.进入多说网站 http://duoshuo.com/ 并且登录. 2.点击首页的"我要安装",进入创建站点页面,然后根据自己的实际情况填写信息. 3.进入后台管理界面,点击工具->获取代码->通用代码,将这段代码复制到你留言板或者是评论区的地方,代码中需要你填写的信息在"文章"中设置
PHP结合jQuery实现的评论顶、踩功能

当我们浏览网页时,我们想对网页内容如文章.评论中的观点持赞同或反对意见时,可以通过点击网页中的"顶"和"踩"来进行投票.而整个交互过程,开发者可以通过ajax异步来实现,从而提高用户体验. 本文结合实例,讲解使用PHP+MySql+jQuery实现的"顶"和"踩"投票功能,通过记录用户IP,判断用户的投票行为是否有效,该实例也可以扩展到投票系统中.如果您具备PHP.MySql和jQuery相关基础知识,那么请继续往下阅读. 准
ThinkPHP上使用多说评论插件的方法

本文实例讲述了ThinkPHP上使用多说评论插件的方法.分享给大家供大家参考.具体实现方法如下: 先前访问网友的一些网站,他们好些的局部都发生了变化,如文章的评论模块设计得和谐美观,集表情和分享工具于一体,而且可以盖楼式评论,当时我真是称赞不已,真牛啊,能开发出这样的评论模块!后来聊天我才知道,原来他们是使用了多说评论插件. 什么是多说? 多说是一款追求极致体验的社会化评论框,可以用微博.QQ.人人.豆瓣等帐号登录并评论,用社交账号登录,进行评论,同时转发到社交平台(可选),进行回复.标记喜欢.
python正则匹配抓取豆瓣电影链接和评论代码分享

复制代码代码如下: import urllib.requestimport reimport time def movie(movieTag): tagUrl=urllib.request.urlopen(url) tagUrl_read = tagUrl.read().decode('utf-8') return tagUrl_read def subject(tagUrl_read): ''' 这里还存在问题: ①这只针对单独的一页进行排序,而没有
js写的评论分页(还不错)

复制代码代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer
如何利用http协议发布博客园博文评论

先给大家介绍下实现原理: 给博文提交评论的实质就是通过http协议服务器发送一个post请求.在发布评论前,我们需要做什么呢?对,是必须要登录的.但登录是另一件事情,我们这里先不讨论.用户登录后,服务器给客户端设置一个cookie.http是无状态的.也就是说客户端向服务器发送请求后,服务器返回响应.一次通信完成.服务器不会记得刚才是谁向自己发送请求.所以客户端需要拿着服务器给自己设定好的cookie向服务器发送请求并告知服务器自己的身份,服务器根据cookie产生响应. 准备工作: 为了完成本
javascript无刷新评论实现方法

本文实例讲述了javascript无刷新评论实现方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无刷新评论</title> <s
Python抓取京东图书评论数据

京东图书评论有非常丰富的信息,这里面就包含了购买日期.书名.作者.好评.中评.差评等等.以购买日期为例,使用Python + Mysql的搭配进行实现,程序不大,才100行.相关的解释我都在程序里加注了: from selenium import webdriver from bs4 import BeautifulSoup import re import win32com.client import threading,time import MySQLdb def mydebug():
完美实现仿QQ空间评论回复特效

评论回复是个很常见的东西,但是各大网站实现的方式却不尽相同.大体上有两种方式 1. 像优酷这种最常见,在输入框中@要回复的人,这种方式下,用户可以修改@. 新浪微博则是在这个基础上,弹出好友菜单.这种方式的好处是不需要任何js,css处理兼容. 2. 像qq空间这种,对回复的人整个删除.本屌感觉这种方式比较好,但这种方式有些兼容性上的细节,这个后面会详细说明. 事实上,qq空间的这种实现在效果上是兼容了ie和现代浏览器的,做的非常好.上面是chrome ie8 ie7 ie6就不上图片了,太卡了
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）

我们大部分人都发过动态,想必都知道发动态.回复评论.删除动态的整个过程,那么作为初学者,要模仿这些功能有点复杂的,最起码表的关系得弄清楚~~ 先把思路理一下: (1)用户登录,用session读取当前用户----目的是:该用户可以发表动态,重点是显示该用户好友及他自己发表的动态,并且按发表时间排序. (2)做个发表动态框实现发表动态功能 (3)显示该用户和他好友已经发表对的动态信息,并按发表时间由近到远显示 (4)再每条动态后面做一个评论按钮和删除按钮:实现对动态的评论,回复和删除(斜体部分下一
Android仿QQ空间动态界面分享功能

先看看效果: 用极少的代码实现了动态详情及二级评论的数据获取与处理和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持下拉刷新与上拉加载和模糊搜索,反复快速滑动仍然非常流畅. 缓存机制使得数据可在启动界面后瞬间加载完成. 动态详情界面MomentActivity支持 (取消)点赞.(删除)评论.点击姓名跳到个人详情等. 只有1张图片时图片放大显示,超过1张则按九宫格显示. 用到的CommentContainerView和Mom
jsp实现仿QQ空间新建多个相册名称并向相册中添加照片功能

工具:Eclipse,Oracle,smartupload.jar:语言:jsp,Java:数据存储:Oracle. 实现功能介绍: 主要是新建相册,可以建多个相册,在相册中添加多张照片,删除照片,删除相册,当相册下有照片时先删除照片才能删除相册. 因为每个相册和照片要有所属人,所以顺带有登录功能. 声明:只是后端实现代码,前台无任何样式,代码测试可行,仅供参考. 代码: 数据库连接帮助类: public class JDBCHelper { public static final String
Android开发仿QQ空间根据位置弹出PopupWindow显示更多操作效果

我们打开QQ空间的时候有个箭头按钮点击之后弹出PopupWindow会根据位置的变化显示在箭头的上方还是下方,比普通的PopupWindow弹在屏幕中间显示好看的多. 先看QQ空间效果图: 这个要实现这个效果可以分几步进行 1.第一步自定义PopupWindow,实现如图的样式,这个继承PopupWindow自定义布局很容易实现 2.得到点击按钮的位置,根据位置是否在屏幕的中间的上方还是下方,将PopupWindow显示在控件的上方或者下方 3.适配问题,因为PopupWindow上面的操作列表
JS实现的仿QQ空间图片弹出效果代码

本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: <script type="text/javascript"> function imageShow(which_click) { var image_path = which_click; //alert(image_path); var tag_top = Math.max(document.documentElement.scrollTop, document.body.scroll
基于jQuery实现仿QQ空间送礼物功能代码

我们在QQ空间里面有一个送礼物的功能,显示了最近过生日的人.我们只要把鼠标放到如下图的生日快乐那标签上,就会显示可以给该人送的礼物!! 如下图所示: 单击其中的一个礼物,就会马上送出去.但是我们现在是要说的还有单击更多的时候,会另外弹出一个新的窗口在当前页面最前面!如下图显示: 怎么实现那上面的功能呢? 就是把鼠标放上去,弹出一天tips,单击tips里面的控件,之后弹出另外一个弹出框. 网上就会有很多比较好的插件,就先到网上去找了相对应的jquery插件. jquery中tips的有很多插件,
Android仿QQ空间顶部条背景变化效果

本文给大家分享仿QQ空间页面顶部条随界面滑动背景透明度变化的效果,这个效果在其他应用程序中也很常见,技能+1. 一.上代码,具体实现笔者之前的文章第二部分总是二话不说,直接上代码,很干脆,其实更好的方式是引导读者思考:这个效果如何实现.前期做好效果的功能分析,才能读者更好的理解. QQ空间的这个页面其实并不复杂,我们看看QQ空间的演示界面: 可以看见,整个页面其实只有两个根元素,一个是ListView,一个是标题栏,前者可以上下滑动,给用户呈现内容:后者固定位置不动,类似于一个导航栏,左边一个
Android仿QQ聊天撒花特效很真实

先看看效果图吧实现这样的效果,你要知道贝塞尔曲线,何谓贝塞尔曲线?先在这里打个问号下面就直接写了 1.activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent
Android ScrollView滑动实现仿QQ空间标题栏渐变

今天来研究的是ScrollView-滚动视图,滚动视图又分横向滚动视图(HorizontalScrollView)和纵向滚动视图(ScrollView),今天主要研究纵向的.相信大家在开发中经常用到,ScrollView的功能已经很强大了,但是仍然满足不了我们脑洞大开的UI设计师们,所以我们要自定义-本篇文章主要讲监听ScrollView的滑动实现仿QQ空间标题栏渐变,先看一下效果图: 好了我们切入主题. 有可能你不知道的那些ScrollView属性 •android:scrollbars 设

完美实现仿QQ空间评论回复特效

相关推荐

随机推荐