今天跟着张鑫旭的代码练习了新浪的几个小小地方
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了今天跟着张鑫旭的代码练习了新浪的几个小小地方相关的知识，希望对你有一定的参考价值。
了解了键盘事件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>
以上是关于今天跟着张鑫旭的代码练习了新浪的几个小小地方的主要内容，如果未能解决你的问题，请参考以下文章