1.css

#like_area img{
width: 30px;
height: 30px;
position: absolute;
bottom: 100px;
left: 60%;
margin-left: -10px;
}

2.div

<div id="like_area"></div>

3.点击事件处理

// 点亮
function like() {
var x = 100;
var y = 900;
var num = Math.floor(Math.random() * 4 + 1); // 随机数
var index=$('#like_area').children('img').length; // 获取最新的img长度
var rand = parseInt(Math.random() * (x - y + 1) + y); // 飘离的位置
$("#like_area").append("<img style='margin-left: 40px;' src='../image/like/"+num+".png'>");
$("#like_area img").animate({
bottom:"350px",
opacity:"0",
left: rand,
},3000);
}

准备好星型图片,

直播聊天室,点亮效果,jquery实现的更多相关文章

  1. Web jsp开发学习——网上直播聊天室的简单开发

    整个界面为chat.jsp: 如果用户没有登录,就不能进行聊天. 为将发言的句子传到页面上,要设置一个<iframe></iframe>虚拟框架,将allmessage.jsp ...

  2. Socket.io文字直播聊天室的简单代码

    直接上代码吧,被注释掉的主要是调试代码,和技术选型的测试代码 var app = require('express')(); var server = require('http').Server(a ...

  3. 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室

    在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...

  4. SignalR 开始聊天室之旅

    首先明确需求,我现在有很多个直播间,每个直播间内需要存在一个聊天室,每个聊天室内可以存在很多人聊天,当然,只有登陆系统的会员才能聊天,没有登陆的,干看着吧! 根据以上需求,可以做出三个简单的页面:登陆 ...

  5. 使用Beetle简单构建聊天室程序

    之前已经讲解了Beetle简单地构建网络通讯程序,那程序紧紧是讲述了如何发送和接收数据:这一章将更深入的使用Beetle的功能,主要包括消息制定,协议分析包括消息接管处理等常用的功能.为了更好的描述所 ...

  6. 聊天室或文字直播间的效果(AS开发实战第二章学习笔记)

    聊天室或文字直播间的效果即是新的文字消息总是加入窗口末尾,同时窗口内部的文本整体向上滚动,窗口的大小.位置保持不变聊天室用到的属性与方法说明gravity 指定文本的对齐方式,取值left|botto ...

  7. Websocket直播间聊天室教程 - GoEasy快速实现聊天室

    最近两年直播那个火啊,真的是无法形容!经常有朋友问起,我想实现一个直播间聊天或者我想开发一个聊天室, 要如何开始呢? 今天小编就手把手的教你用GoEasy做一个聊天室,当然也可以用于直播间内的互动.全 ...

  8. 基于JQuery+JSP的无数据库无刷新多人在线聊天室

    JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...

  9. Android 开发笔记___textview_聊天室效果

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

随机推荐

  1. linux 空间不够了 修改 /boot

    1>  查看空间多少:df -h2>  查看当期内核: uname -r3>  查找内核   rpm -qa | grep kernel4>  删除多余的内核 yum remo ...

  2. 【codeforces 816C】Karen and Game

    [题目链接]:http://codeforces.com/contest/816/problem/C [题意] 给你一个n*m的矩阵; 一开始所有数字都是0; 每次操作,你能把某一行,或某一列的数字全 ...

  3. 从头认识java-18.6 synchronized在其它对象上同步和ThreadLocal来消除共享对象的同步问题

    这一章节我们来介绍在其它对象上同步与ThreadLocal. 前一章节我们使用了 1.synchronized在其它对象上同步 class ThreadA implements Runnable { ...

  4. E-UTRA channel bandwidths per operating band (36.101)

    E-UTRA channel bandwidths per operating band (36.101) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/ ...

  5. MetaSploit攻击实例讲解------工具Meterpreter常用功能介绍(kali linux 2016.2(rolling))(详细)

    不多说,直接上干货! 说在前面的话 注意啦:Meterpreter的命令非常之多,本篇博客下面给出了所有,大家可以去看看.给出了详细的中文 由于篇幅原因,我只使用如下较常用的命令. 这篇博客,利用下面 ...

  6. storm集群安装配置

    1.上传解压 2.进入到storm的conf目录 接上图 启动三台节点的zookeeper集群 启动和查看 Storm 在 nimbus.host 所属的机器上启动 nimbus 服务和 logvi ...

  7. Swift学习笔记(1):基础部分

    目录: 分号 常量和变量 数据类型 数值型类型转换 类型别名 元组 可选类型 API版本检查 分号 Swift并不强制要求你在每条语句的结尾处使用分号( ; ),你也可以按照自己的习惯添加分号.如果在 ...

  8. IE11 mobile 的 UA(User-Agent)

    如果您在 IE11 mobile 上获得的 UA(User-Agent) 是 Mozilla/5.0 (Mobile; Linux; Android 4.2; Microsoft Build/Virt ...

  9. 洛谷P3195 [HNOI2008]玩具装箱TOY(单调队列优化DP)

    题目描述 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1...N的N件玩具, ...

  10. 《剑指offer》反转链表

    一.题目描述 输入一个链表,反转链表后,输出链表的所有元素. 二.输入描述 输入一个链表 三.输出描述 返回逆转后的链表 四.牛客网提供的框架 /* struct ListNode { int val ...