码迷，mamicode.com
首页 > 其他好文 > 详细

今天跟着张鑫旭的代码练习了新浪的几个小小地方

时间：2016-03-01 18:50:03      阅读：163      评论：0      收藏：0      [点我收藏+]

标签：

了解了键盘事件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>

今天跟着张鑫旭的代码练习了新浪的几个小小地方

标签：

原文地址：http://www.cnblogs.com/sisi2020/p/5232021.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！