jquery QQ微博
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>腾讯微博</title>
<style type="text/css">
body
{
margin: 0px;
background: url('img/wrapBg.jpg') no-repeat #EBF1F1;
}
#logo
{
margin: 30px 0 0 300px;
}
#myBody
{
width: 800px;
height: 200px;
border: 1px solid #000;
}
#myBdLeft
{
width: 590px;
height: 100%;
background: #fff;
float: left;
}
#talkBox
{
text-align: left;
margin: 0 0 0 25px;
}
#msgTxt
{
width: 540px;
height: 80px;
overflow: hidden;
font-family: Tahoma, Arial;
font-size: 14px;
border: 1px solid gray;
}
#talkBox h2
{
text-align: left;
padding: 0px;
margin: 0px;
font: normal normal normal 18px/29px 'MicroSoft YaHei' , SimHei;
}
#funBox
{
width: 540px;
}
#funBox a
{
color: #000;
text-decoration: none;
font-size: 14px;
}
.creatNew, .atSome, .insertFace, .uploadPic, .uploadVideo
{
background-position: -170px -33px;
display: inline-block;
height: 16px;
padding-left: 18px;
}
.countTxt
{
color: #999;
float: right;
line-height: 33px;
margin: 0 15px 0 0;
}
.countTxt em
{
font-family: Georgia, Tahoma, Arial;
font-size: 26px;
position: relative;
top: -5px;
vertical-align: middle;
}
.sendBtn
{
float: right;
margin: 0 20px 0 0;
padding: 0px;
background: url(img/bg1.png) -117px -165px no-repeat;
line-height: 33px;
margin-left: 14px;
height: 30px;
width: 112px;
border: 0px;
cursor: pointer;
}
#btnCloFri
{
cursor: pointer;
}
#myBdRight
{
background: #CCEBF4;
width: 210px;
height: 100%;
float: right;
}
</style>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//1。扩展jQuery
$.fn.selectRange = function (start, end) {
var curObj = $(this).get(0);
if (!curObj) return;
else if (curObj.setSelectionRange) {
curObj.focus(); curObj.setSelectionRange(start, end);
} /* WebKit */
else if (curObj.createTextRange) {
var range = curObj.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
} /* IE */
else if (curObj.selectionStart) {
curObj.selectionStart = start;
curObj.selectionEnd = end;
}
};
//页面加载后执行
$(function () {
//高亮显示,注册一个鼠标进入的事件
$('#sendBox .sendBtn').mouseover(function () {
$(this).css('backgroundPosition', '0 -195px');
//鼠标离开的事件
}).mouseout(function () {
$(this).css('backgroundPosition', '-117px -165px');
});
//输入内容
$('#funBox .creatNew').click(function () {
if ($('#msgTxt').val().length == 0) {
$('#msgTxt').val('#输入话题标题#').selectRange(1, 7);
}
});
//计算字数
setInterval(function () {
//调用文本框的change事件
$('#msgTxt').change();
}, 200);
$('#msgTxt').change(function () {
var len = 140 - $(this).val().length; //还有多少个
if (len > 0) {
$('#sendBox .countTxt').html('还能输入<em>' + len + '</em>个字');
} else {
$('#sendBox .countTxt').html('已经超出了<em><font color="red">' + Math.abs(len) + '</font></em>个字');
}
});
//加载朋友
$('#funBox .atSome').click(function () {
var friendsList = ['凤姐', '黑山', 'gay', '郭德纲', '老杨', '老苏', '老蒋', '老牛', '老王', '老虎', '老马'];
//创建一个层,设置样式
if ($('#dvFriend').length == 0) {
var dvObj = $('<div id="dvFriend" style="width:100px;border:1px solid blue; background-color:white;position:absolute;"></div>').appendTo($('body'));
dvObj.css('left', $(this).offset().left + 'px');
dvObj.css('top', $(this).offset().top + $(this).height() + 'px');
//层可以关闭的
$('<span style="background-color:gray;cursor:pointer;float:right;">关闭</span>').click(function () {
$(this).parent().remove(); //关闭层
}).appendTo(dvObj);
//创建ul标签
var ulObj = $('<ul style="clear:both;list-style-type:none; margin:0;padding:0;"></ul>').appendTo(dvObj); //把ul标签添加到层中
for (var key in friendsList) {//遍历朋友的数组,创建li标签
$('<li style="margin-bottom:5px;cursor:pointer;">@' + friendsList[key] + '</li>').appendTo(ulObj).mouseover(function () {//为li标签添加鼠标进入的事件
$(this).css('backgroundColor', 'yellow'); //设置背景颜色
}).mouseout(function () {//为li标签添加鼠标离开的事件
$(this).css('backgroundColor', ''); //背景颜色设置为默认
}).click(function () {//为li标签添加点击事件
//设置文本域中的内容
if ($('#msgTxt').val() == '#输入话题标题#') {
$('#msgTxt').val($(this).text());
} else {
$('#msgTxt').val($('#msgTxt').val() + $(this).text());
} // end else
});
} // end for
} // end if
//显示朋友的标签 ul p 设置样式, 朋友有高亮显示 ，还可以点击 ，朋友的名字 添加到文本域
}); //end click
//加载表情
$('#funBox .insertFace').click(function () {
var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '发呆', '4.gif': '得意', '5.gif': '流泪', '6.gif': '害羞', '7.gif': '闭嘴', '8.gif': '睡', '9.gif': '大哭', '10.gif': '尴尬', '11.gif': '发怒', '12.gif': '调皮', '13.gif': '呲牙', '14.gif': '惊讶', '15.gif': '难过', '16.gif': '酷', '17.gif': '冷汗', '18.gif': '抓狂', '19.gif': '吐', '20.gif': '偷笑', '21.gif': '可爱', '22.gif': '白眼', '23.gif': '傲慢', '24.gif': '饥饿', '25.gif': '困', '26.gif': '惊恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奋斗', '31.gif': '咒骂', '32.gif': '疑问', '33.gif': '嘘', '34.gif': '晕', '35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髅', '38.gif': '敲打', '39.gif': '再见', '40.gif': '擦汗', '41.gif': '抠鼻', '42.gif': '鼓掌', '43.gif': '糗大了', '44.gif': '坏笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', '48.gif': '鄙视', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '阴险', '52.gif': '亲亲', '53.gif': '吓', '54.gif': '可怜', '55.gif': '菜刀', '56.gif': '西瓜', '57.gif': '啤酒', '58.gif': '篮球 ', '59.gif': '乒乓', '60.gif': '咖啡', '61.gif': '饭', '62.gif': '猪头', '63.gif': '玫瑰', '64.gif': '凋谢', '65.gif': '示爱', '66.gif': '爱心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '闪电', '70.gif': '炸弹', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢虫', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太阳', '77.gif': '礼物', '78.gif': '拥抱', '79.gif': '强', '80.gif': '弱', '81.gif': '握手', '82.gif': '胜利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳头', '86.gif': '差劲', '87.gif': '爱你', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '爱情', '91.gif': '飞吻', '92.gif': '跳跳', '93.gif': '发抖', '94.gif': '怄火', '95.gif': '转圈', '96.gif': '磕头', '97.gif': '回头', '98.gif': '跳绳', '99.gif': '挥手', '100.gif': '激动', '101.gif': '街舞', '102.gif': '献吻', '103.gif': '左太极', '104.gif': '右太极', '105.gif': '淡定', '106.gif': '晕', '107.gif': '不满', '108.gif': '睡觉', '109.gif': '小调皮', '110.gif': '咒骂', '111.gif': '发怒', '112.gif': '偷笑', '113.gif': '微笑', '114.gif': '震惊', '115.gif': '囧' };
//创建层
if ($('#dvf').length == 0) {
var dvFace = $('<div id="dvf" style="width:370px;border:1px solid blue;background-color:white;position:absolute;"></div>').appendTo($('body'));
dvFace.css('left', $(this).offset().left - 100 + 'px');
dvFace.css('top', $(this).offset().top + $(this).height() + 'px');
//显示"表情"和关闭
$('<span style="float:left">表情</span>').appendTo(dvFace);
$('<span style="float:right;background-color:gray;cursor:pointer;">关闭</span>').click(function () {
$(this).parent().remove(); //移除这个层
}).appendTo(dvFace);
//显示图片
//创建一个层 用来添加表情
var dvImage = $('<div style="clear:both;"></div>').appendTo(dvFace);
for (var key in userFaces) {
//创建表情图片添加到层中
$('<img src="faces/' + key + '" title="' + userFaces[key] + '" />').mouseover(function () {
$(this).css('cursor', 'pointer');
}).click(function () {
if ($('#msgTxt').val() == '#输入话题标题#') {
$('#msgTxt').val('['+$(this).attr('title')+']');
} else {
$('#msgTxt').val($('#msgTxt').val()+'['+$(this).attr('title')+']');
}
}).appendTo(dvImage);
}
} //end if
});
});
</script>
</head>
<body>
<img id="logo" src="img/b3_100901.png" alt="" />
<center>
<div id="myBody">
<div id="myBdLeft">
<div id="talkBox">
<h2>
<a>夏天来了，你懂得......</a></h2>
<textarea id="msgTxt"></textarea>
<div id="funBox">
<a href="javascript:void(0);" class="creatNew">话题</a> <a href="javascript:void(0);"
class="atSome">朋友</a> <a href="javascript:void(0);" class="insertFace">表情</a>
<a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);"
class="uploadVideo">视频</a>
</div>
<div id="sendBox">
<input type="button" class="sendBtn" value="" />
<span class="countTxt">还能输入<em>140</em>字</span>
</div>
</div>
</div>
<div id="myBdRight">
</div>
</div>
</center>
</body>
</html>
jquery QQ微博的更多相关文章
- javascript社交平台分享-新浪微博、QQ微博、QQ好友、QQ空间、人人网
整理的五个社交平台的分享 <!doctype html> <html lang="en"> <head> <meta charset=&q ...
- 第三方账号登录--QQ登录，以及QQ微博账号登录
在QQ登陆测试的时候,刚申请正常登陆,但是由于app未上线,或许是腾讯升级造成的个别时候QQ登陆无法成功会提示下图代码,功能上没啥问题,已经达到 测试效果了.附上腾讯错误代码图(大家测试QQ登陆的时候 ...
- 分享到微信、微博、QQ空间、QQ微博
一:分享到微信 //分享到微信$("#weixin").bind("click", function () { var p = { url: ...
- 每日技术总结：jquery datetimepicker,微博QQ好友QQ空间微信等分享接口
前言: 1.jquery datetimepicker 今天遇到一个日期控件格式的问题,默认选中显示的并不是设定的值,而是当天的日期.于是去查了一遍文档. 参考文章:jquery datetimepi ...
- 亲手用模块化方式写一个jquery QQ表情插件。
在回复或是评论的时候,很多时间都需要有回复表情的功能,然后而需要插入QQ表情可以是最常见的. 插件也写多很多个了,这次写插件就下了一个决定.就是使用模块化来开发. 最后在我的源代码中有这样子一段: v ...
- 同样是高并发，QQ/微博/12306的架构难度一样吗？
开篇 同一个用户并发扣款时,有一定概率出现数据不一致,可以使用CAS乐观锁的方式,在不降低吞吐量,保证数据的一致性: UPDATE t_yue SET money=$new_money WHERE u ...
- jquery实现微博输入和发布
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 微信分享,使用js,分享给朋友,朋友圈,QQ微博
<script> var imgUrl = "http://www.baidu.com/img/bdlogo.gif"; var lineLink = "ht ...
- js分享功能(微信,QQ,微博,空间,豆瓣等)
日常编程中,我们可能会碰到项目中的分享功能,各大平台都有分享接口和文档说明,当然也有一些一键分享插件,例如:sosh,iShare.js等等 但有些同学不想引用插件,那么我整理了一些常用的分享至平台功 ...
随机推荐
- 小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...
- ant使用ssh和linux交互 如：上传文件
http://jiajun.iteye.com/blog/741001 http://blog.csdn.net/xymyeah/article/details/4098073 http://blog ...
- Birt
http://www.eclipse.org/birt/ 咖啡图 http://www.kafeitu.me/activiti/2012/05/26/kft-activiti-demo.html
- RabbitMQ 延迟队列实现订单支付结果异步阶梯性通知
在第三方支付中,例如支付宝.或者微信,对于订单请求,第三方支付系统采用的是消息同步返回.异步通知+主动补偿查询的补偿机制. 由于互联网通信的不可靠性,例如双方网络.服务器.应用等因素的影响,不管是同步 ...
- httpclient htmlunit下载单个文件
httpclient public class Download { public static void main(String[] args) throws ClientProtocolExcep ...
- Spring4+Springmvc+quartz实现多线程动态定时调度
scheduler定时调度系统是大多行业项目都需要的,传统的spring-job模式,个人感觉已经out了,因为存在很多的问题,特别是定时调度的追加.修改.删除等,需要修改xml,xml的配置生效无非 ...
- Eclipse 学习总结
一. Eclipse 中一个普通 JavaWeb 项目的目录结构 如果项目工程中没有web.xml文件,可以手动动态添加. 右击项目 -> java EE Tools -> ...
- UnitOfWork
数据访问层之UnitOfWork 接上文 项目架构开发:数据访问层之IQuery 本章我们继续IUnitOfWork的开发,从之前的IRepository接口中就可以看出,我们并没有处理单元事务, ...
- 从Client应用场景介绍IdentityServer4（五）
原文:从Client应用场景介绍IdentityServer4(五) 本节将在第四节基础上介绍如何实现IdentityServer4从数据库获取User进行验证,并对Claim进行权限设置. 一.新建 ...
- C#颜色对照使用表
这篇文章来来源于C# Color Table,这里是我翻译的中文版本,其中已经加上了我的一些理解和注释.翻译这篇文章的原因是我在写C#程序的时候发现,C#自带的颜色种类极多(详见下表),如果没有直观的 ...