1.动态创建表格
<!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>
2.回到顶部案例
<!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>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
<h1>传智播客</h1>
</div>
</body>
</html>
3.城市选择案例
<!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"> >> </button>
<button id="btn-sel-none"> << </button>
<button id="btn-back"> < </button>
<button id="btn-sel"> ></button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
</body>
</html>
4.省市选择
<!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: array:要遍历的数组
//i:key,索引编号
//e:索引对应的值
$.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>
5.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);
}