直播聊天室,点亮效果,jquery实现
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实现的更多相关文章
- Web jsp开发学习——网上直播聊天室的简单开发
整个界面为chat.jsp: 如果用户没有登录,就不能进行聊天. 为将发言的句子传到页面上,要设置一个<iframe></iframe>虚拟框架,将allmessage.jsp ...
- Socket.io文字直播聊天室的简单代码
直接上代码吧,被注释掉的主要是调试代码,和技术选型的测试代码 var app = require('express')(); var server = require('http').Server(a ...
- 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室
在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...
- SignalR 开始聊天室之旅
首先明确需求,我现在有很多个直播间,每个直播间内需要存在一个聊天室,每个聊天室内可以存在很多人聊天,当然,只有登陆系统的会员才能聊天,没有登陆的,干看着吧! 根据以上需求,可以做出三个简单的页面:登陆 ...
- 使用Beetle简单构建聊天室程序
之前已经讲解了Beetle简单地构建网络通讯程序,那程序紧紧是讲述了如何发送和接收数据:这一章将更深入的使用Beetle的功能,主要包括消息制定,协议分析包括消息接管处理等常用的功能.为了更好的描述所 ...
- 聊天室或文字直播间的效果(AS开发实战第二章学习笔记)
聊天室或文字直播间的效果即是新的文字消息总是加入窗口末尾,同时窗口内部的文本整体向上滚动,窗口的大小.位置保持不变聊天室用到的属性与方法说明gravity 指定文本的对齐方式,取值left|botto ...
- Websocket直播间聊天室教程 - GoEasy快速实现聊天室
最近两年直播那个火啊,真的是无法形容!经常有朋友问起,我想实现一个直播间聊天或者我想开发一个聊天室, 要如何开始呢? 今天小编就手把手的教你用GoEasy做一个聊天室,当然也可以用于直播间内的互动.全 ...
- 基于JQuery+JSP的无数据库无刷新多人在线聊天室
JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...
- Android 开发笔记___textview_聊天室效果
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
随机推荐
- 【BZOJ4002】[JLOI2015]有意义的字符串 - 矩阵乘法
题意: 给出b,d,n,求$\lfloor(\frac{b+\sqrt{d}}{2})^n\rfloor \mod 999999999999999989$(原题是7528443412579576937 ...
- Union File System
目录 Union File System AUFS Docker是如何使用AUFS的 image layer 和 AUFS (docker版本不同可能会有区别,我的是在/var/lib/docker下 ...
- C++ vector基本用法
转自金河http://www.cnblogs.com/wang7/archive/2012/04/27/2474138.html 1 基本操作 (1)头文件#include<vector> ...
- Laravel修炼:服务容器绑定与解析
前言 老实说,第一次老大让我看laravel框架手册的那天早上,我是很绝望的,因为真的没接触过,对我这种渣渣来说,laravel的入门门槛确实有点高了,但还是得硬着头皮看下去(虽然到现在我还有很多 ...
- Windows和Linux的编译理解
Windows一般编译出来的x86的软件,就是只能在x86的系统上才能运行,同理,在x64系统上也是一样的道理. Linux利用gcc编译器编译,可以在Linux上面运行,但是想要在嵌入式系统上运行的 ...
- 关于bom ef+bb+bf的问题
今天在商品详细页头部出现了一行空白,各种尝试无果,最后怀疑是不是bom头的问题,经过断点跟踪调试逐步缩小范围,果然最后发现是一个语言包文件的开头有 ef bb bf样式的字节,用ultraedit另存 ...
- Android 开发者不得不面对的六个问题
一份关于移动应用开发的调查报告显示,Androdid开发者对谷歌的移动操作系统平台的兴趣正在下降.尽管依然有79%的开发者表示对Android “非常感兴趣”,但调查报告显示,一些迹象表明在2012到 ...
- 又见关系并查集 以POJ 1182 食物链为例
简单的关系并查集一般非常easy依据给出的关系搞出一个有向的环,那么两者之间的关系就变成了两者之间的距离. 对于此题: 若u.v不在一个集合内,则显然此条语句会合法(暂且忽略后两条.下同). 那么将f ...
- MYSQL学习笔记三:日期和时间函数
MYSQL学习笔记三:日期和时间函数 1. 获取当前日期的函数和获取当前时间的函数 /*获取当前日期的函数和获取当前时间的函数.将日期以'YYYY-MM-DD'或者'YYYYMMDD'格式返回 */ ...
- Android Shape使用
说明 在Android开发中,使用shape可以很方便的帮我们画出想要的背景,相对于png图片来说,使用shape可以减少安装包的大小,而且能够更好的适配不同的手机. 使用 先贴出官网上的说明: &l ...