<!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腾讯微博的更多相关文章

  1. 仿腾讯微博的一个弹出框 v0.1 beta

    仿腾讯微博的一个弹出框 v0.1 beta   代码写的不太好,新手请大家海涵,只为博君一笑,勿放在心上. 写在这里留作纪念,也许以后用的到. 效果 CSS .prompt{ position: ab ...

  2. 腾讯微博 JS-SDK接入

    官方文档: open.js api查询 api调试接口 1.接口初始化 加载openjs源代码. <script type="text/javascript" src=&qu ...

  3. 调试腾讯微博 win8 版 共享失败的问题

    我是社交控,喜欢分享内容.分享到 腾讯微博时总失败,心想不能就这么算了,要看看异常的细节. 在VS 2012里,我选择 Debug > Debug Installed App Package, ...

  4. 腾讯微博的账号登录及api操作

    .tqq.php <?php /** * PHP Library for t.qq.com * * @author */ class tqqPHP { function __construct( ...

  5. 关于使用QQ、新浪微博、腾讯微博等第三方登录网站的开发过程（二）

    (二).新浪微博登录 1. 首先在新浪微博开放平台注册成为开发者.[http://open.weibo.com/connect] 具体自己填写一些相关信息就OK! 2. 注册成功之后,点击[微连接], ...

  6. 分享到QQ空间、新浪微博、腾讯微博的代码

    今天公司原来的分享代码,在IE下有问题.网上找了下网上的分享代码. 给网页加上分享代码,借助网友的力量推广网站,目前已经很流行了 以下是网页代码 QQ空间分享代码如下: <a href=&quo ...

  7. 腾讯微博模拟登陆+数据抓取(java实现)

    不多说,贴出相关代码. 参数实体: package token.def; import java.io.Serializable; import java.util.Properties; publi ...

  8. 腾讯微博数据抓取(java实现)

    不多说,同样贴出相关代码 参数实体: package token.def; import java.io.Serializable; import java.util.Properties; publ ...

  9. 腾讯微博java(android)sdk新增微博api详细介绍

    本文主要介绍腾讯微博android sdk中新增微博有关的8个接口,以及使用的示例代码 注意:以下所有的api示例代码都需要先新建QqTSdkService类对象qqTSdkService并初始化,见 ...

随机推荐

  1. git 分支建立及合并

    分支的新建与合并 让我们来看一个简单的分支新建与分支合并的例子,实际工作中你可能会用到类似的工作流. 你将经历如下步骤: 开发某个网站. 为实现某个新的需求,创建一个分支. 在这个分支上开展工作. 正 ...

  2. Spark源代码阅读笔记之DiskStore

    Spark源代码阅读笔记之DiskStore BlockManager底层通过BlockStore来对数据进行实际的存储.BlockStore是一个抽象类,有三种实现:DiskStore(磁盘级别的持 ...

  3. [React] Break up components into smaller pieces using Functional Components

    We are going to ensure our app is structured in a clear way using functional components. Then, we ar ...

  4. 【u022】车的放置

    [问题描述] [题解] 先考虑一个最简单的情况.如一个n*n的棋盘.然后要放k个车. 我们可以先选出k行即C(n,k); 然后在列上对这k个棋子进行一次全排列即A(n,k); 比如k = 4;N=5 ...

  5. Windows7系统下安装OpenSSL攻略

    Windows7系统下安装OpenSSL攻略 http://blog.chinaunix.net/uid-20479991-id-216269.html http://my.oschina.net/s ...

  6. MySQL忘记root密码不重启mysqld的方法

    MySQL忘记root密码不重启mysqld的方法   1.首先得有一个可以拥有修改权限的mysql数据库账号,当前的mysql实例账号(较低权限的账号,比如可以修改zabbix数据库)或者其他相同版 ...

  7. uva 116 Unidirectional TSP【号码塔+打印路径】

    主题: uva 116 Unidirectional TSP 意甲冠军:给定一个矩阵,当前格儿童值三个方向回格最小值和当前的和,就第一列的最小值并打印路径(同样则去字典序最小的). 分析:刚開始想错了 ...

  8. eclipse配置本地服务

    1.下载安装eclipse 2.下载tomcat文件,并解压 3.下载tomcat插件 com.sysdeo.eclipse.tomcat_3.3.0 将com.sysdeo.eclipse.tomc ...

  9. NSNull 和 nil 的判断

    情况1. 等于Null if ([_content isEqual:[NSNull null]] ) { //等于Null } 情况2.  等于nil if (_content==nil || [_c ...

  10. QT5.8.0+MSVC2015安装以及环境配置（不需要安装VS2015）

    原文:QT5.8.0+MSVC2015安装以及环境配置(不需要安装VS2015) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/snow_rain_ ...