demo4-新浪微博更新文字放大
http://www.zhangxinxu.com/wordpress/2009/10/javascript%E5%AE%9E%E7%8E%B0%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A%E6%96%87%E5%AD%97%E6%94%BE%E5%A4%A7%E6%98%BE%E7%A4%BA%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/
部分说明：
1、动画使用的是setTimeout函数，相比较setInterval函数，其更容易控制。
2、IE下使用半透明需要使用IE半透明滤镜，写法如下：node.style.filter = “Alpha(opacity=”+opacity*100+”)”;Firefox等浏览器下直接使用node.style.opacity = opacity;这里无需做浏览器判断，因为两个样式互不冲突，直接写在一起就可以了。
3、JavaScript代码中有个设置a标签zoom为1的代码，是为了使其haslayout，IE半透明滤镜才可以生效。
<!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>
<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>
<body>
<div class="bigBg">
<!-- 主体部分 -->
<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">bala</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);//sina-weibo-word-big
}
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);
weibo.insertBody.insertBefore(insertDiv,weibo.insertBody.childNodes[1]);
};
var number = function(node,aim,minnum,maxnum){
//console.log(typeof aim.innerHTML);
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>
</body>
</html>
浙公网安备 33010602011771号