Jquery02(动态创建表格案例、回到顶部案例、城市选择案例【权限管理】、省市选择【联动】、QQ微博)...

 动态创建表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-jQuery-动态创建表格案例</title>
    <script src="jquery-1.11.3.js"></script>
    <style>
        * { padding: 0; margin: 0; }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script>
        var data = [{
            name: "传智播客",
            url: "http://www.itcast.cn",
            type: "IT最强培训机构"
        },{
            name: "黑马程序员",
            url: "http://www.itheima.com",
            type: "大学生IT培训机构"
        },{
            name: "传智前端学院",
            url: "http://web.itcast.cn",
            type: "前端的黄埔军校"
        }];

        $(function(){
            //第一种:动态创建表格的方式,使用拼接html的方式 (推荐)
            // var html = "";
            // for( var i = 0; i < data.length; i++ ) {
            //     html += "<tr>";
            //     html +=     "<td>" + data[i].name + "</td>"
            //     html +=     "<td>" + data[i].url + "</td>"
            //     html +=     "<td>" + data[i].type + "</td>"
            //     html += "</tr>";
            // }
            // $("#J_TbData").html(html);

            //第二种: 动态创建表格的方式,使用动态创建dom对象的方式
            //清空所有的子节点
            $("#J_TbData").empty();
            //自杀
            // $("#J_TbData").remove();

            for( var i = 0; i < data.length; i++ ) {
                //动态创建一个tr行标签,并且转换成jQuery对象
                var $trTemp = $("<tr></tr>");
                //往行里面追加 td单元格
                $trTemp.append("<td>"+ data[i].name +"</td>");
                $trTemp.append("<td>"+ data[i].url +"</td>");
                $trTemp.append("<td>"+ data[i].type +"</td>");
                // $("#J_TbData").append($trTemp);
                $trTemp.appendTo("#J_TbData");
            }
        });
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>地址</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody id="J_TbData">
        </tbody>
    </table>

    <br>
    <!-- 整个表格:table -->
    <table>
        <thead>
            <tr>  <!-- tr:table row:表格的行 -->
                <th>一个格</th>
                <th>一个格</th>
                <th>一个格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- rowspan:跨度两个行 -->
                <td rowspan="2">一个格</td>

                <!-- clospan:跨度两个列 -->
                <td colspan="2">一个格</td>
                <!-- <td>一个格</td> -->
            </tr>

            <tr>
                <!-- <td>sd</td> -->
                <td>ss</td>
                <td>ss</td>
            </tr>
        </tbody>

    </table>
</body>
</html>

 回到顶部案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery- 回到顶部案例</title>
    <style>
        .bk-top-box {
            position: fixed;
            bottom: 40px;
            right: 10px;
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $("#J-bk-top").on('click',function(){
                $(window).scrollTop(0);
                $(window).scrollLeft(0);
            });

            $("#J_Box").on('click','h1',function(){
                //this  jQuery的事件响应方法中,this指向被点击的 dom对象
                this.innerHTML += '-';

                //dom对象转换成 jQuery对象
                $(this).text($(this).text() + 1);
            });
        });
    </script>
</head>
<body>
    <div class="bk-top-box" id="J-bk-top">
        <img src="imgs/bk-top3.jpg" height="44" width="44" alt="">
    </div>

    <!-- ctrl + shift + g  自动包裹标签 -->
     <div id="J_Box">
         <h1>测试1</h1>
         <h1>测试2</h1>
         <h1>测试3</h1>
         <h1>测试</h1>
         <h1>测试</h1>

     </div>
</body>
</html>

城市选择案例【权限管理】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-jQuery-城市选择案例</title>
    <style type="text/css" media="screen">
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }
        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>
    <script src="jquery-1.11.3.js"></script>
    <script>
        // $(function(){
        //     $("#btn-sel-none").on('click',function(){
        //         $("#tar-city option").appendTo('#src-city');
        //     });

        //     $("#btn-sel-all").on('click',function(){
        //         $("#src-city option").appendTo('#tar-city');
        //     });
        //     $("#btn-sel").on('click',function(){
        //         $("#src-city option:selected").appendTo('#tar-city');
        //     });
        //     $("#btn-back").on('click',function(){
        //         $("#tar-city option:selected").appendTo('#src-city');
        //     });
        // });


        $(function(){
            $("#btn-sel-all").on('click',function(){
                //把所有的 城市从左边 移动到右边select中
                $("#src-city option").appendTo("#tar-city");
            });
            $("#btn-sel-none").on('click',function(){
                //把所有的 城市从左边 移动到右边select中
                $("#tar-city option").appendTo("#src-city");
            });
            $("#btn-sel").on('click',function(){
                //把所有的 城市从左边 移动到右边select中
                $("#src-city option:selected").appendTo("#tar-city");
            });

            $("#btn-back").on('click',function(){
                //把所有的 城市从左边 移动到右边select中
                $("#tar-city option:selected").appendTo("#src-city");
            });
        });
    </script>
</head>
<body>
     <select id="src-city" name="src-city" multiple>
         <option value="1">北京</option>
         <option value="2">上海</option>
         <option value="3">深圳</option>
         <option value="4">广州</option>
         <option value="5">西红柿</option>
     </select>
    <div class="btn-box">
        <button id="btn-sel-all"> &gt;&gt; </button>
        <button id="btn-sel-none"> &lt;&lt; </button>
        <button id="btn-back"> &lt; </button>
        <button id="btn-sel"> &gt;</button>
    </div>

     <select id="tar-city" name="tar-city" multiple>

     </select>
</body>
</html>

省市选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-jQuery-省市选择</title>
    <style>
        select {
            width: 200px;
            font-size: 14px;
        }        
    </style>
    <script src="jquery-1.11.3.js"></script>
    <script>
         var CITYS = { "北京": ["北京"], "上海": ["上海"], "天津": ["天津", "塘沽"], "重庆": ["重庆", "涪陵", "江津", "巫山"], "河北": ["石家庄", "张家口", "承德", "秦皇岛", "唐山", "廊坊", "保定", "沧州", "衡水", "邢台", "邯郸", "张北", "蔚县", "丰宁", "围场", "怀来", "遵化", "青龙", "坝县", "乐亭", "饶阳", "黄骅", "南宫"], "山西": ["太原", "大同", "朔州", "阳泉", "长治", "晋城", "忻州", "晋中", "临汾", "运城", "吕梁", "右玉", "河曲", "五台山", "五寨", "兴县", "原平", "离石", "榆社", "隰县", "介休", "候马", "阳城"], "内蒙古": ["呼和浩特", "包头", "乌海", "赤峰", "通辽", "呼伦贝尔", "鄂尔多斯", "乌兰察布", "巴彦淖尔", "兴安盟", "锡林郭勒盟", "阿拉善盟", "额尔古纳右旗", "图里河", "满州里", "海拉尔", "小二沟", "新巴尔虎右旗", "新巴尔虎左旗", "博克图", "扎兰屯", "科前旗阿尔山", "索轮", "乌兰浩特", "东乌珠穆沁旗", "额济纳旗", "拐子湖", "巴音毛道", "阿拉善右旗", "二连浩特", "那仁宝力格", "满都拉", "阿巴嘎旗", "苏尼特左旗", "海力素", "朱日和", "乌拉特中旗", "百灵庙", "四子王旗", "化德", "集宁", "吉兰太", "临河", "鄂托克旗", "东胜", "伊金霍洛旗", "阿拉善左旗", "西乌珠穆沁旗", "扎鲁特旗", "巴林左旗", "锡林浩特", "林西", "开鲁", "多伦", "翁牛特旗", "宝国图"], "辽宁": ["沈阳", "朝阳", "阜新", "铁岭", "抚顺", "本溪", "辽阳", "鞍山", "丹东", "大连", "营口", "盘锦", "锦州", "葫芦岛", "彰武", "开原", "清原", "叶柏寿", "新民", "黑山", "章党", "桓仁", "绥中", "兴城", "岫岩", "宽甸", "瓦房店", "庄河"], "吉林": ["长春", "白城", "松原", "吉林", "四平", "辽源", "通化", "白山", "延吉", "乾安", "前郭尔罗斯", "通榆", "长岭", "三岔河", "双辽", "蛟河", "敦化", "汪清", "梅河口", "桦甸", "靖宇", "东岗", "松江", "临江", "集安", "长白"], "黑龙江": ["哈尔滨", "齐齐哈尔", "黑河", "大庆", "伊春", "鹤岗", "佳木斯", "双鸭山", "七台河", "鸡西", "牡丹江", "绥化", "大兴安岭", "漠河", "塔河", "新林", "呼玛", "嫩江", "孙吴", "北安", "克山", "富裕", "海伦", "明水", "富锦", "泰来", "安达", "铁力", "依兰", "宝清", "肇州", "通河", "尚志", "虎林", "绥芬河"], "江苏": ["南京", "徐州", "连云港", "宿迁", "淮安", "盐城", "扬州", "泰州", "南通", "镇江", "常州", "无锡", "苏州", "赣榆", "盱眙", "淮阴", "射阳", "高邮", "东台", "吕泗", "溧阳", "吴县东山"], "浙江": ["杭州", "湖州", "嘉兴", "舟山", "宁波", "绍兴", "衢州", "金华", "台州", "温州", "丽水", "平湖", "慈溪", "嵊泗", "定海", "嵊县", "鄞县", "龙泉", "洪家", "玉环"], "安徽": ["合肥", "宿州", "淮北", "阜阳", "亳州", "蚌埠", "淮南", "滁州", "马鞍山", "芜湖", "铜陵", "安庆", "黄山", "六安", "巢湖", "池州", "宣城", "砀山", "宿县", "寿县", "霍山", "桐城", "芜湖县", "宁国", "屯溪"], "福建": ["福州", "南平", "三明", "莆田", "泉州", "厦门", "漳州", "龙岩", "宁德", "邵武", "武夷山市", "浦城", "建瓯", "福鼎", "泰宁", "长汀", "上杭", "永安", "屏南", "平潭", "崇武", "东山"], "江西": ["南昌", "九江", "景德镇", "鹰潭", "新余", "萍乡", "赣州", "上饶", "抚州", "宜春", "吉安", "修水", "宁冈", "遂川", "庐山", "波阳", "樟树", "贵溪", "玉山", "南城", "广昌", "寻乌"], "山东": ["济南", "聊城", "德州", "东营", "淄博", "潍坊", "烟台", "威海", "青岛", "日照", "临沂", "枣庄", "济宁", "泰安", "莱芜", "滨州", "菏泽", "惠民县", "羊角沟", "长岛", "龙口", "成山头", "朝城", "泰山", "沂源", "莱阳", "海阳", "石岛", "兖州", "莒县"], "河南": ["郑州", "三门峡", "洛阳", "焦作", "新乡", "鹤壁", "安阳", "濮阳", "开封", "商丘", "许昌", "漯河", "平顶山", "南阳", "信阳", "周口", "驻马店", "济源", "卢氏", "孟津", "栾川", "西峡", "宝丰", "西华", "固始"], "湖北": ["武汉", "十堰", "襄樊", "荆门", "孝感", "黄冈", "鄂州", "黄石", "咸宁", "荆州", "宜昌", "随州", "仙桃", "天门", "潜江", "神农架", "恩施", "郧西", "房县", "老河口", "枣阳", "巴东", "钟祥", "广水", "麻城", "五峰", "来风", "嘉鱼", "英山"], "湖南": ["长沙", "张家界", "常德", "益阳", "岳阳", "株洲", "湘潭", "衡阳", "郴州", "永州", "邵阳", "怀化", "娄底", "吉首", "桑植", "石门", "南县", "沅陵", "安化", "沅江", "平江", "芷江", "双峰", "南岳", "通道", "武冈", "零陵", "常宁", "道县"], "广东": ["广州", "清远", "韶关", "河源", "梅州", "潮州", "汕头", "揭阳", "汕尾", "惠州", "东莞", "深圳", "珠海", "中山", "江门", "佛山", "肇庆", "云浮", "阳江", "茂名", "湛江", "南雄", "连县", "佛冈", "连平", "广宁", "增城", "五华", "惠来", "南澳", "信宜", "罗定", "台山", "电白", "徐闻"], "广西": ["南宁", "桂林", "柳州", "梧州", "贵港", "玉林", "钦州", "北海", "防城港", "崇左", "百色", "河池", "来宾", "贺州", "融安", "凤山", "都安", "蒙山", "那坡", "靖西", "平果", "桂平", "龙州", "灵山", "东兴", "涠洲岛"], "海南": ["海口", "三亚", "文昌", "琼海", "万宁", "东方", "澄迈", "定安", "儋县", "琼中", "陵水", "西沙", "昌江", "乐东", "白沙", "临高"], "四川": ["成都", "广元", "绵阳", "德阳", "南充", "广安", "遂宁", "内江", "乐山", "自贡", "泸州", "宜宾", "攀枝花", "巴中", "达川", "资阳", "眉山", "雅安", "阿坝", "甘孜", "西昌", "石渠", "若尔盖", "德格", "色达", "道孚", "马尔康", "红原", "小金", "松潘", "都江堰", "平武", "巴塘", "新龙", "理塘", "稻城", "康定", "峨眉山", "木里", "九龙", "越西", "昭觉", "雷波", "盐源", "会理", "万源", "阆中", "奉节", "梁平", "万县市", "叙永", "酉阳"], "贵州": ["贵阳", "六盘水", "遵义", "安顺", "毕节", "铜仁", "凯里", "都匀", "兴义", "威宁", "盘县", "桐梓", "习水", "湄潭", "思南", "黔西", "三穗", "兴仁", "望谟", "罗甸", "独山", "榕江"], "云南": ["昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "思茅", "临沧", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山州", "德钦", "贡山", "中甸", "维西", "华坪", "会泽", "腾冲", "元谋", "沾益", "瑞丽", "景东", "泸西", "耿马", "澜沧", "景洪", "元江", "勐腊", "江城", "蒙自", "屏边", "广南", "勐海"], "西藏": ["拉萨", "那曲", "昌都", "林芝", "山南", "日喀则", "阿里", "狮泉河", "改则", "班戈", "安多", "普兰", "申扎", "当雄", "拉孜", "尼木", "泽当", "聂拉木", "定日", "江孜", "错那", "隆子", "帕里", "索县", "丁青", "嘉黎", "洛隆", "波密", "左贡", "察隅"], "陕西": ["西安", "延安", "铜川", "渭南", "咸阳", "宝鸡", "汉中", "榆林", "安康", "商洛", "定边", "吴旗", "横山", "绥德", "长武", "洛川", "武功", "华山", "略阳", "佛坪", "镇安", "石泉"], "甘肃": ["兰州", "嘉峪关", "金昌", "白银", "天水", "武威", "酒泉", "张掖", "庆阳", "安西", "陇南", "临夏", "甘南", "马鬃山", "敦煌", "玉门镇", "金塔", "高台", "山丹", "永昌", "民勤", "景泰", "靖远", "榆中", "临洮", "环县", "平凉", "西峰镇", "玛曲", "夏河合作", "岷县", "定西"], "青海": ["西宁", "海东", "海北", "海南", "黄南", "果洛", "玉树", "海西", "茫崖", "冷湖", "祁连", "大柴旦", "德令哈", "刚察", "门源", "格尔木", "都兰", "共和县", "贵德", "民和", "兴海", "同德", "同仁", "杂多", "曲麻莱", "玛多", "清水河", "达日", "河南", "久治", "囊谦", "班玛"], "宁夏": ["银川", "石嘴山", "吴忠", "固原", "中卫", "惠农", "陶乐", "中宁", "盐池", "海源", "同心", "西吉"], "新疆": ["乌鲁木齐", "克拉玛依", "石河子", "阿拉尔", "喀什", "阿克苏", "和田", "吐鲁番", "哈密", "克孜勒", "博尔塔拉", "昌吉", "库尔勒", "伊犁", "塔城", "阿勒泰", "哈巴河", "吉木乃", "福海", "富蕴", "和布克赛尔", "青河", "阿拉山口", "托里", "北塔山", "温泉", "精河", "乌苏", "蔡家湖", "奇台", "昭苏", "巴仑台", "达板城", "七角井", "库米什", "巴音布鲁克", "焉耆", "拜城", "轮台", "库车", "吐尔尕特", "乌恰", "阿合奇", "巴楚", "柯坪", "铁干里克", "若羌", "塔什库尔干", "莎车", "皮山", "民丰", "且末", "于田", "巴里坤", "伊吾", "伊宁"], "香港": ["香港"], "澳门": ["澳门"], "台湾": ["台北", "台中", "高雄"] };
        $(function(){
            //初始化 所有的省的数据
            $.each(CITYS,function(key, value){
                var $option = $("<option></option>");
                $option.text(key);//获取当前省的名字
                $("#province").append($option);
            });

            //当省的数据发生改变的时候执行 加载市的数据
            $("#province").on("change",function(){
                //拿到当前省的名字
                var pro = $("#province option:selected").text();

                //清空原有的city数据
                $("#city").empty()
                //根据省名,拿到所有的城市,然后根据城市创建option添加到cityselect中
                $.each(CITYS[pro],function(i, value){
                    $("#city").append("<option>"+ value +"</option>");
                });
            });

            //上来后初始化一下城市的数据
            $("#province").triggerHandler('change');
        });
    </script>
</head>
<body>
     <select name="province" id="province">
         
     </select>
     
      <select name="city" id="city">
         
     </select>

</body>
</html>

QQ微博

<!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('imgs/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(imgs/bg1.png) -117px -165px no-repeat;
        line-height: 33px;
        margin-left: 14px;
        height: 30px;
        width: 112px;
        border: 0px;
        cursor: pointer;
    }

    .sendBtn:hover {
        background: url(imgs/bg1.png) 0px -195px no-repeat;
    }
    
    #btnCloFri {
        cursor: pointer;
    }
    
    #myBdRight {
        background: #CCEBF4;
        width: 210px;
        height: 100%;
        float: right;
    }

    .atSomeList {
        position: absolute;
        background-color: #f0f0f0;
        border: 1px solid #a0a0a0;
        width: 60px;
        list-style: none;
    }
    
    .atSomeList a {
        text-decoration: none;
        color: #c0c0c0;
    }

    .showFace {
        position: absolute;
        background-color: #f0f0f0;
        border: 1px solid #a0a0a0;
        width: 200px;
    }
    </style>
    <!-- <script src="jquery-1.11.3.js" type="text/javascript"></script> -->
    <script src="jquery-1.8.2.min.js"></script>
    <script src="js/06weibo.js" type="text/javascript">

    </script>
</head>

<body>
    <imgs id="logo" src="imgs/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>
var friendsList = ['中国', '日本', '韩国', '朝鲜','蒙古'];

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': '囧' };

$(function(){
    
});

window.onload = function() {
    //初始化atsome
    initAtSome();
    //初始化图片
    initFaces();
};

function initFaces(){
    var str  = "<div class='showFace'>";
    for( var key in userFaces) {
        str += "<img alt='"+ userFaces[key] +"' src='faces/"+key+"'>"
    }
    str += "</div>";

    var $faceDiv = $(str);
    $faceDiv.appendTo( ".insertFace" ).hide().css({
        left: $( ".insertFace" ).offset.left + "px",
        top: $(".insertFace").offset.top + 16 + "px",
    }).find( "img" ).click(function() {
        setText( "[" + $(this).attr("alt") + "]" );
    });

    $(".insertFace").hover(function() {
        $faceDiv.show();
    },function() {
        $faceDiv.hide();
    });    
}
function initAtSome() {
    var h = $(".atSome").height();
    var str = "";
    str += "<ul class='atSomeList'>";
    for( var i = 0; i < friendsList.length; i++ ) {
        str += "<li>";
        str +=         "<a herf='javascript:'>@"+friendsList[i]+"</a>";
        str += "</li>"
    }
    str += "</ul>";

    var $atSomeList = $(str);
    $(".atSome").append($atSomeList).hover(function(){
        $atSomeList.show();
    },function(){
        $atSomeList.hide();
    });
    $atSomeList.css({
        top: ($(".atSome").offset().top + h - 15) +"px",
        left: ($(".atSome").offset().left + 14) + "px"
    }).hide().find("a").click(function(){
        setText($(this).text());
    });
}

function setText(str) {
    $("#msgTxt").text($("#msgTxt").text() + str);

}

 

转载于:https://www.cnblogs.com/java-g/articles/6652236.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值