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

转载于:https://www.cnblogs.com/dxmfans/p/9434798.html

jquery腾讯微博相关推荐

  1. JS模仿腾讯微博app撕纸效果

    本来想用css3来实现,但后来脑袋一热就用了js,省的别人你ie怎么没效果啊!在腾讯微博app上看到的一个效果,鼠标击哪里就撕了哪里,跟撕报纸似的,任意点击左边面的灰色区域,查看效果,当时觉得很有意思 ...

  2. js分享代码(新浪微博,腾讯微博,QQ空间,QQ好友)

    js分享代码(新浪微博,腾讯微博,QQ空间,QQ好友) 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

  3. 腾讯微博API时间线相关接口返回的微博信息中head值使用问题

    腾讯微博API时间线相关接口返回的微博信息中head值表示作者头像url,这个链接直接访问并不能使用,需要再附加一个参数指定图片的大小(100.50),比如:[head]/100.

  4. 腾讯微博快速有效增加广播转播量的方法与技巧

    经过一段时间对腾讯微博的实践,对腾讯微博也算是有所收获,要做好腾讯微博,无非就是两个方面,一是增加听众数,二是增加广播的转播量,本篇写的是做好微博质量–即增加转播量的方法. 增加转播量不像增加听众数那 ...

  5. web-QQ(腾讯)-Email-TMessage(腾讯微博记事本)

    专题图编号:ylbtechOpenSource 1,功能描述 2,技术与环境 操作系统: windows 开发语言: C# 开发框架:   数据库: 无 开发软件: Microsoft Visual ...

  6. 腾讯微博即将关停，十年了，你用过吗？

    作者 | 李雪敬 出品 | 程序人生(ID:coder_life) 9月5日,腾讯微博宣布称将于9月28日停止运营和服务,届时将无法登陆,同时提醒用户可在腾讯微博关停前备份好个人的相关信息. 腾讯微博 ...

  7. 接入新浪、腾讯微博和人人网的Android客户端实例 接入新浪、腾讯微博和人人网的Android客户端实例...

    做了个Android项目,需要接入新浪微博,实现时也顺带着研究了下腾讯微博和人人网的Android客户端接入,本文就跟大家分享下三者的Android客户端接入方法. 一.实例概述 说白了,接入微博就是 ...

  8. 【原创】腾讯微博的XSS攻击漏洞

    相信大家都知道新浪微博在6月28日发生的XSS攻击事件了吧?在那晚里,大量新浪微博用户自动发送微博信息和自动关注一名叫"hellosamy"的用户. 究竟XSS攻击为什么能有这么大 ...

  9. 腾讯微博qq说说备份导出工具_10年了！腾讯微博宣布关停，宜昌90后的青春不再！...

    说起微博 大家想起的都是新浪微博 但你还记得腾讯.网易等 也推出过微博吗? 9月5日 腾讯微博官方公告宣布 由于业务调整 将于2020年9月28日晚23时59分 停止服务和运营 公告一出,马上上了热搜 ...

最新文章

  1. 顺序结构，判断结构 if，switch
  2. Django的第二次尝试
  3. 下拉列表框Spinner
  4. 跨链(8)跨链双雄Cosmos“系统框架”
  5. Go语言的多态(Polymorphism)
  6. linux中脚本退出函数,Linux 命令 shell 脚本之09(函数)
  7. python 将元组解析为多个参数
  8. [react] react的状态提升是什么？使用场景有哪些
  9. webpack打包问题
  10. 琢越网用户使用手册和反馈
  11. WordPress 客户端软件列表
  12. python零基础学难吗_零基础学习Python难吗？要怎么学Python才是最有效的？
  13. 【Python 12】汇率兑换5.0（Lambda函数）
  14. 《精进：如何成为一个很厉害的人》
  15. 单片机开发环境要求java地址_AVR单片机教程——开发环境配置
  16. ZSG-AP5甲烷传感器校验仪
  17. VMware软件虚拟机不能全屏
  18. [TOG2019]Deferred Neural Rendering:Image Synthesis using Neural Textures
  19. 一个简单的socket套接字服务器，Python
  20. 声音传感器模块的改进

热门文章

  1. 揭开JVM所看到的try/catch/finally
  2. Facebook大牛、HipHop作者赵海平加入阿里巴巴
  3. ios - Push远程通知代码设置 DeviceToken
  4. Siege 3.0 Beta2 发布，压力测试工具
  5. CCNP实验：路由重分布注意事项
  6. C语言利用循环判断大月小月,对大月和小月进行判断
  7. PIL图像处理：读取图像，显示图像，ROI，保存图像
  8. Vivado中MIG核中DDR的读写控制
  9. 如何设置MathType下标的正斜体
  10. mysql数据库映射到内存_基于共享内存的数据库映射