今天跟着张鑫旭的代码练习了新浪的几个小小地方
了解了键盘事件onkeydown,onkeyup.getElementsByTagname("em")返回的是集合，集合，使用的时候记得加a[0]下标。
setTimeout(step2,400);是400毫秒后在调用step2函数。
parseInt(sedNum,x)转换成 x 进制的数值，parseString()等
要有封装的思想。
---------------别人代码---------------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="JavaScript实现新浪微博文字放大显示动画效果" />
<meta name="description" content="张鑫旭web前端学习之css,jQuery,JavaScript" />
<meta name="keywords" content="张鑫旭,鑫空间-鑫生活,博客,web前端,css,jQuery,,JavaScript,demo页面,学习" />
<meta name="author" content="张鑫旭,zhangxixnu" />
<title>JavaScript实现新浪微博文字放大显示动画效果</title>
<link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" />
<link rel="stylesheet" href="http://simg.sinajs.cn/miniblog/css/common/common.css?version=1.1.2.72" />
<link rel="stylesheet" href="http://simg.sinajs.cn/miniblog/css/index/index.css?version=1.1.2.72" />
<link rel="stylesheet" href="http://simg.sinajs.cn/miniblog/skin/skin_001/skin.css?version=1.1.2.72" />
</head>
<div class="bigBg">
<div class="mblog">
<div class="toptray">
<div class="toptrayBg"></div>
<div class="toptrayMain">
<div class="tTray_R">
<div class="MnbTit">
<ul>
<li><a href="javascript:void(0);">新浪微博</a></li>
<li class="banLine">
<img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/>
</li>
<li><a href="javascript:void(0);">我的首页</a></li>
<li class="banLine">
<img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/>
</li>
<li><a href="javascript:void(0);">我的微博</a></li>
<li class="banLine">
<img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/>
</li>
<li><a href="javascript:void(0);">随便看看</a></li>
</ul>
</div>
</div>
<div class="BanCont">
<ul>
<li><a href="javascript:void(0);">设置</a></li>
<li class="banLine"><img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/></li>
<li><a href="javascript:void(0);">手机</a></li>
<li class="banLine"><img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/></li>
<li><a href="javascript:void(0);">找朋友</a></li>
<li class="banLine"><img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/></li>
<li><a target="_blank" href="javascript:void(0);">帮助</a></li>
<li class="banLine"><img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/></li>
<li><a href="javascript:void(0);">退出</a></li>
</ul>
</div>
<div class="tTray_L">
<div id="m_search" class="search">
<input type="text" value="搜索话题、朋友..." id="m_keyword" class="fm_txt"/>
<div class="searchBtn"><a id="m_submit" href="javascript:void(0);">搜索</a></div>
</div>
</div>
</div>
</div>
<!-- logo部分 -->
<div class="bigName">
<div id="fbq" class="logo"><a href="http://t.sina.com.cn/1263362863"></a></div>
<div class="searchFri"><a href="/invite/invite.php">邀请朋友关注我</a></div>
</div>
</div>
<!-- 主体部分 -->
<div class="main">
<div class="mainBottomBg">
<!-- 左半部分 -->
<div class="mainL">
<div class="fbq">
<div class="box_1"><!--php需要输出的提示文本--></div>
<div id="publisher_info" class="fbqCount">你还可以输入<em class="bold">140</em>字</div>
<div class="box_2">
<textarea id="publish_editor"></textarea>
</div>
<div class="box_3">
<span id="publisher_image" class="span_1" style="margin-left:20px;">
<a unselectable="on" href="javascript:void(0);">插入图片</a>
</span>
<span id="publisher_topic" class="span_2">
<a href="javascript:void(0);">插入话题</a>
</span>
<a id="publisher_submit" class="btn2" href="javascript:void(0);" style="float:right; margin-right:58px;"></a>
<!-- <a id="publisher_submit" class="btn" href="javascript:void(0);"/> -->
</div>
</div>
<div class="feedBox" id="feedBox">
<div id="feedTitle" class="feedBoxNav">
<span style="" id="feed_msg_new" class="spanFloat">
<a href="javascript:void(0);">有新微博，刷新看看</a>
</span>
<span class="bold" style="color:#444444;">我的首页</span>
<span>
</span>
<div class="mBlog_linedot"></div>
</div>
<div class="feedList">
<div class="feedCell">
<div class="avatar">
<a href="http://t.sina.com.cn/zhangxinxu"><img title="张鑫旭" src="http://tt8.sinaimg.cn/1263362863/50/1253773643"/></a>
</div>
<div class="Contant">
<div class="oriTxt">
<p>
<a title="我" href="http://t.sina.com.cn/zhangxinxu">我</a>：<span>刚翻译了一篇技术文章：让网络更快一些——最小化浏览器中的回流(reflow)
<a title="http://www.zhangxinxu.com/wordpress/?p=311" target="_blank" href="http://www.zhangxinxu.com/wordpress/?p=311">http://sinaurl.cn/hfGnM</a>
<a href="http://t.sina.com.cn/k/web">#web#</a>
<a href="http://t.sina.com.cn/k/%25E4%25BC%2598%25E5%258C%2596">#优化#</a>
<a href="http://t.sina.com.cn/k/reflow">#reflow#</a></span>
</p>
</div>
<div class="from">
<span class="option">
<cite class="delete"><a href="javascript:void(0);">删除</a></cite>
|
<cite class="forward">转发</cite>
|
<cite class="collect"><a href="javascript:void(0);">收藏</a></cite>
|
<cite class="reply">
<a href="javascript:void(0);">评论</a>
</cite>
</span>
<span class="mycome"><cite><a href="#zhangxinxu">1分钟前</a></cite>来自新浪微博 </span>
</div>
</div>
</div>
<div class="mBlog_linedot"></div>
</div>
</div>
</div>
<!-- 右半部分 -->
<div class="mainR">
<div class="person2">
<div class="person_content">
<div class="person_head">
<p class="userPt person_pt">
<a href="javascript:void(0);"><img title="张鑫旭" src="http://tt8.sinaimg.cn/1263362863/50/1253773643"/></a>
</p>
<div class="person_info">
<p class="person_nm"><strong>张鑫旭</strong></p>
<p title="浙江 杭州" class="person_level">浙江 杭州</p>
</div>
<div class="clear"></div>
</div>
<div class="person_atten">
<div class="person_atten_l">
<p class="num"><strong><a href="javascript:void(0);">792</a></strong></p>
<p class="person_atten_link"><a href="javascript:void(0);">关注</a></p>
</div>
<div class="person_atten_l boxW">
<p class="num"><strong><a href="javascript:void(0);">301</a></strong></p>
<p class="person_atten_link"><a href="javascript:void(0);">粉丝</a></p>
</div>
<div class="person_atten_r" style="position: relative;">
<p class="num">
<strong style="position:absolute; width:46px; height:28px; line-height:28px; left:-4px; top:-3px; text-align:center;">
<a href="javascript:void(0);" id="sendNum">166</a>
<a href="#no" id="absNum" style="position:absolute; width:46px; height:28px; left:0; top:0; display:none;"></a>
</strong>
</p>
<p></p>
<p class="person_atten_link"><a href="javascript:void(0);">微博</a></p>
</div>
<div class="clear"></div>
</div>
<div class="boxRNav">
<ul>
<li class="navStyle"><span class="span_home">我的首页</span></li>
<li class="navStyle2"><span class="span_mblog"><a href="/favs">我的收藏</a></span></li>
<li class="navStyle2"><span class="span_mblog"><a href="/atme">@我的</a></span></li>
<li class="navStyle2"><span id="toptray_ring" class="span_com"><a href="/comments">我的评论</a></span></li>
<li class="navStyle2"><span id="toptray_ring_message" class="span_com"><a href="/messages">我的私信</a></span></li>
</ul>
</div>
</div>
</div>
<!--话题列表-->
<div class="f_pro">
<div class="title bold">关于我</div>
<div class="con">86出生，小小本科，本想做个生物学者，谁知大学误入歧途，进入了互联网行业，已无回头路，正朝着理想奋斗。</div>
<div class="more"><a href="javascript:void(0);">修改</a>>></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var weibo = {
insertBtn: document.getElementById("publisher_submit"),
insertArea : document.getElementById("publish_editor"),
insertRemind: document.getElementById("publisher_info"),
insertBody: document.getElementById("feedBox"),
insertTitle: document.getElementById("feedTitle"),
sendNum: document.getElementById("sendNum"),
absNum: document.getElementById("absNum")
};
//当文本域获取焦点后，当键盘松开时，判断里面的字符是否为空，从而改变按钮的显示状态和文字的个数
var wordLimit = function(obj,num,chg){
obj.onkeyup = function(){
weibo.insertText = weibo.insertArea.value;
if(obj.value.length >= 1){
if(obj.value.length > num){
chg.innerHTML = "已超出<em class='bold'>" + (obj.value.length - num) + "</em>字";
chg.style.color = "#f00";
weibo.insertBtn.className = "btn2";
}else{
chg.innerHTML = "还可以输入<em class='bold'>" + (num - obj.value.length) + "</em>字";
chg.style.color = "#fff";
weibo.insertBtn.className = "btn";
}
}else{
weibo.insertBtn.className = "btn2";
}
};
if(obj.value.length >= 1 && obj.value.length <=num){
chg.innerHTML = "还可以输入<em class='bold'>" + (num - obj.value.length) + "</em>字";
chg.style.color = "#fff";
weibo.insertBtn.className = "btn";
}
};
//由于火狐，chrome浏览器在页面刷新时文本域中保留内容，故在加载时即验证一次
wordLimit(weibo.insertArea,140,weibo.insertRemind);
weibo.insertArea.onfocus = function(){
wordLimit(this,140,weibo.insertRemind);
};
weibo.insertBtn.onclick = function(){
if(this.className === "btn"){
insert();
number(weibo.absNum,weibo.sendNum,18,26);
}
return false;
};
var insert = function(){
weibo.insertText = weibo.insertArea.value;
weibo.insertHTML = '<div class="feedList"><div class="feedCell"><div class="avatar"><a href="http://t.sina.com.cn/zhangxinxu"><img title="张鑫旭" src="http://tt8.sinaimg.cn/1263362863/50/1253773643"/></a></div> <div class="Contant"><div class="oriTxt"><p>'+weibo.insertText+'</p></div><div class="from"><span class="option"><cite class="delete"><a href="javascript:void(0);">删除</a></cite> | <cite class="forward">转发</cite> | <cite class="collect"><a href="javascript:void(0);">收藏</a></cite> | <cite class="reply"><a href="javascript:void(0);">评论</a></cite></span><span class="mycome"><cite><a href="#zhangxinxu">1分钟前</a></cite>来自新浪微博 </span></div></div></div><div class="mBlog_linedot"></div>';
var insertDiv = document.createElement("div");
insertDiv.className = "feedList";
insertDiv.innerHTML = weibo.insertHTML;
weibo.insertBody.insertBefore(insertDiv,weibo.insertTitle.nextSibling);
};
var number = function(node,aim,minnum,maxnum){
var num = parseInt(aim.innerHTML,10);
aim.style.zoom = 1;
node.style.display = "inline-block";
node.innerHTML = num;
var fontSize = minnum;
var opacity = 1;
var step = function(){
fontSize+=1;
opacity-=0.09;
node.style.fontSize = fontSize + "px";
node.style.opacity = opacity;
aim.style.opacity = opacity;
node.style.filter = "Alpha(opacity="+opacity*100+")";
aim.style.filter = "Alpha(opacity="+opacity*100+")";
node.style.zoom = 1;
if(fontSize < maxnum){
setTimeout(step,40);
}else{
num+=1;
node.innerHTML = num;
aim.innerHTML = num;
setTimeout(step2,40);
}
};
setTimeout(step,10);
var step2 = function(){
fontSize-=1;
opacity+=0.09;
node.style.fontSize = fontSize + "px";
node.style.opacity = opacity;
aim.style.opacity = opacity;
node.style.filter = "Alpha(opacity="+opacity*100+")";
aim.style.filter = "Alpha(opacity="+opacity*100+")";
if(fontSize > minnum){
setTimeout(step2,40);
}else{
node.style.display = "none";
}
};
};
</script>
<!--
<script type="text/javascript">
var textval=document.getElementById("publish_editor"),
fbbtn=document.getElementById("publisher_submit"),
numdiv=document.getElementById("publisher_info"),
numem=numdiv.getElementsByTagName("em"),
numlength=textval.value.length,
num=numem[0].innerHTML,
absNum=document.getElementById("absNum");
textval.onkeyup=function(){
if(textval.value!=""){
fbbtn.className="btn";
var numlength=textval.value.length,
num=numem[0].innerHTML;
if(numlength<=num){
numem[0].innerHTML=(num-numlength);
}else{
numdiv.innerHTML="您已经超出"+(numlength-num)+"字";
}
}else{
fbbtn.className="btn2";
}
}
if(numlength<=num){
numem[0].innerHTML=(num-numlength);
}
fbbtn.onclick=function(){
absNum.style.display="inline-block";
var sedNum=document.getElementById("sendNum").innerHTML;
var minSize=18,maxSize=26;
var fontSize=minSize;
var afNum=parseInt(sedNum)+1;
absNum.innerHTML=afNum;
var step=function(){
fontSize+=1;
absNum.style.fontSize=fontSize+"px";
if(fontSize<maxSize){
setTimeout(step,400);
}else{
document.getElementById("sendNum").innerHTML=afNum;
setTimeout(step2,400);
}
}
setTimeout(step,10);
var step2=function(){
fontSize-=1;
absNum.style.fontSize=fontSize+"px";
if(fontSize>maxSize){
setTimeout(step2,40);
}else{
absNum.style.display="none";
}
}
}
</script>-->
</body>
</html>