//加载函数 $(function () {
//效果一.图片的hover事件. //给sendBtn注册hover事件 $('#sendBox input.sendBtn').hover(function () {
//鼠标按钮悬浮事件 $(this).css('backgroundPosition', '0px -195px'); }, function () { //移除事件. $(this).css('backgroundPosition', '-117px -165px'); }); //效果二.话题选中效果 $('#funBox a.creatNew').click(function () {
var msgTxtObj = $('#msgTxt'); if ($.trim(msgTxtObj.val()).length == 0) { msgTxtObj.val('#请输入话题标题#').selectRange(1, 8); } });
//效果三.字数统计 $('#msgTxt').change(function () { //获取用户输入的字数 var count = $.trim($(this).val()).length; //用140-用户输入 var result = 140 - count; //把剩余字符显示到span中. if (result >= 0) { $('#sendBox span.countTxt').html('还能输入<em>' + result + '</em>字'); } else { $('#sendBox span.countTxt').html('已经超出<em style="color:red">' + result + '</em>字'); } }); //即时显示剩余字数. setInterval(function () { $('#msgTxt').change(); //不写参数表示触发这个函数的事件 }, 100);
//效果四.显示朋友列表 $('#funBox a.atSome').click(function () { //1.动态创建一个层.div var dvObj = $('<div style="position:absolute;border:1px solid blue;100px;"><span style="float:right; cursor:poniter;font-size:12px" onclick="$(this).parent().remove();">关闭</span></div>').appendTo('body'); // //2.设置层的样式..c dvObj.css({ 'left': $(this).offset().left, 'top': $(this).offset().top + $(this).height() + 2 + 'px' }); var ulObj = $('<ul style="clear:both;padding:0;margin:0;list-style-type:none;cursor:poniter;backgroundColor:white;font-size:12px" "></ul>').appendTo(dvObj); //3.添加朋友 var friendLists = ['女女', '囡囡', '东东', '曦曦']; //遍历数组 $.each(friendLists, function () { //创建li $('<li>@' + this.toString() + '</li>').mouseover(function () { $(this).css('backgroundColor', 'yellow').siblings('li').css('backgroundColor', 'white'); }).click(function () { //点击li的时候,把当前文本设置到文本框中. $('#msgTxt').val($('#msgTxt').val()+$(this).text()); }).appendTo(ulObj); });
});
}); </script> <style type="text/css"> body { margin: 0px; background: url('img/wrapBg.jpg') no-repeat #EBF1F1; } #common { position: absolute; margin: 0px; padding: 0px; background-color: White; /* border:1px solid blue;*/ border: 1px solid blue; display: none; } #logo { margin: 30px 0 0 300px; } #myBody { 800px; height: 200px; border: 1px solid #000; } #myBdLeft { 590px; height: 100%; background: #fff; float: left; } #talkBox { text-align: left; margin: 0 0 0 25px; } #msgTxt { 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 { 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; 112px; border: 0px; cursor: pointer; } #btnCloFri { cursor: pointer; } #myBdRight { background: #CCEBF4; 210px; height: 100%; float: right; } </style> </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 id="common"> </div> </div> </div> <div id="myBdRight"> </div> </div> </center> </body> </html>