码迷,mamicode.com
首页 > 其他好文 > 详细

腾讯微博项目

时间:2016-12-06 03:34:13      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:insert   腾讯   lob   click   art   标题   疑问   size   else   

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

 

腾讯微博项目

标签:insert   腾讯   lob   click   art   标题   疑问   size   else   

原文地址:http://www.cnblogs.com/blacop/p/6135967.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!