<!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>
<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>