腾讯微博项目

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

 

分类：

技术点：

相关文章：

  • 2021-11-12
  • 2021-12-26
  • 2021-08-24
  • 2022-12-23
  • 2021-09-08
  • 2021-06-05
猜你喜欢
  • 2021-12-26
  • 2021-12-26
  • 2021-12-26
  • 2021-12-26
  • 2021-04-19
  • 2022-02-18
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode