仿*效果

webfamily
新手上路
Rank: 1
发短消息
加为好友
当前离线
1^# 大中小发表于 2012-3-24 14:54 只看该作者
仿*效果

一个原生JS，代码如下：
复制内容到剪贴板
代码:

 

<!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" />

<title>仿腾讯微博效果</title>

<style type="text/css">

body,div,h2,h3,ul,li,p{margin:0;padding:0;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

ul{list-style-type:none;}

body{color:#333;background:#3c3a3b;font:12px/1.5 \5b8b\4f53;}

#msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}

#msgBox form h2{font-weight:400;font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;}

#msgBox form{background:url(img/boxBG.jpg) repeat-x 0 bottom;padding:0 20px 15px;}

#userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png) repeat-x;padding:3px 5px;font:14px/1.5 arial;}

#userName.active,#conBox.active{border:1px solid #7abb2c;}

#userName{height:20px;}

#conBox{width:448px;resize:none;height:65px;overflow:auto;}

#msgBox form div{position:relative;color:#999;margin-top:10px;}

#msgBox img{border-radius:3px;}

#face{position:absolute;top:0;left:172px;}

#face img{width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}

#face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}

#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(http://js.fgm.cc/learn/lesson6/img/btn.png) no-repeat;}

#sendBtn.hover{background-position:0 -30px;}

#msgBox form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}

#msgBox .list{padding:10px;}

#msgBox .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}

#msgBox .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}

#msgBox .list ul{overflow:hidden;zoom:1;}

#msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}

#msgBox .list ul li.hover{background:#f5f5f5;}

#msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;}

#msgBox .list .userPic img { width:50px; height:50px; }

#msgBox .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}

#msgBox .list .userName{display:inline;padding-right:5px;}

#msgBox .list .userName a{color:#2b4a78;}

#msgBox .list .msgInfo{display:inline;word-wrap:break-word;}

#msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}

#msgBox .list .times span{float:left;}

#msgBox .list .times a{float:right;color:#889db6;display:none;}

.tr{overflow:hidden;zoom:1;}

.tr p{float:right;line-height:30px;}

.tr *{float:left;}

</style>

<script type="text/javascript">

/*-------------------------- +

  非拓源原创，此代码源自蓝色理想

  获取id, class, tagName

 +-------------------------- */

var get = {

 byId: function(id) {

  return typeof id === "string" ? document.getElementById(id) : id

 },

 byClass: function(sClass, oParent) {

  var aClass = [];

  var reClass = new RegExp("(^| )" + sClass + "( |$)");

  var aElem = this.byTagName("*", oParent);

  for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);

  return aClass

 },

 byTagName: function(elem, obj) {

  return (obj || document).getElementsByTagName(elem)

 }

};

/*-------------------------- +

  事件绑定, 删除

 +-------------------------- */

var EventUtil = {

 addHandler: function (oElement, sEvent, fnHandler) {

  oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : (oElement["_" + sEvent + fnHandler] = fnHandler, oElement[sEvent + fnHandler] = function () {oElement["_" + sEvent + fnHandler]()}, oElement.attachEvent("on" + sEvent, oElement[sEvent + fnHandler]))

 },

 removeHandler: function (oElement, sEvent, fnHandler) {

  oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, oElement[sEvent + fnHandler])

 },

 addLoadHandler: function (fnHandler) {

  this.addHandler(window, "load", fnHandler)

 }

};

/*-------------------------- +

  设置css样式

  读取css样式

 +-------------------------- */

function css(obj, attr, value)

{

 switch (arguments.length)

 {

  case 2:

   if(typeof arguments[1] == "object")

   { 

    for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];

   }

   else

   { 

    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]

   }

   break;

  case 3:

   attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;

   break;

 }

};

EventUtil.addLoadHandler(function ()

{

 var oMsgBox = get.byId("msgBox");

 var oUserName = get.byId("userName");

 var oConBox = get.byId("conBox");

 var oSendBtn = get.byId("sendBtn");

 var oMaxNum = get.byClass("maxNum")[0];

 var oCountTxt = get.byClass("countTxt")[0];

 var oList = get.byClass("list")[0];

 var oUl = get.byTagName("ul", oList)[0];

 var aLi = get.byTagName("li", oList);

 var aFtxt = get.byClass("f-text", oMsgBox);

 var aImg = get.byTagName("img", get.byId("face"));

 var bSend = false;

 var timer = null;

 var oTmp = "";

 var i = 0;

 var maxNum = 140;

 

 //禁止表单提交

 EventUtil.addHandler(get.byTagName("form", oMsgBox)[0], "submit", function () {return false});

 

 //为广播按钮绑定发送事件

 EventUtil.addHandler(oSendBtn, "click", fnSend);

 

 //为Ctrl+Enter快捷键绑定发送事件

 EventUtil.addHandler(document, "keyup", function(event)

 {

  var event = event || window.event;

  event.ctrlKey && event.keyCode == 13 && fnSend()

 });

 

 //发送广播函数

 function fnSend ()

 {

  var reg = /^\s*$/g;

  if(reg.test(oUserName.value))

  {

   alert("\u8bf7\u586b\u5199\u60a8\u7684\u59d3\u540d");

   oUserName.focus()

  }

  else if(!/^[u4e00-\u9fa5\w]{2,8}$/g.test(oUserName.value))

  {

   alert("\u59d3\u540d\u75312-8\u4f4d\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u4e0b\u5212\u7ebf\u3001\u6c49\u5b57\u7ec4\u6210\uff01");

   oUserName.focus()

  }

  else if(reg.test(oConBox.value))

  {

   alert("\u968f\u4fbf\u8bf4\u70b9\u4ec0\u4e48\u5427\uff01");

   oConBox.focus()

  }

  else if(!bSend)

  {

   alert("\u4f60\u8f93\u5165\u7684\u5185\u5bb9\u5df2\u8d85\u51fa\u9650\u5236\uff0c\u8bf7\u68c0\u67e5\uff01");

   oConBox.focus()

  }

  else

  {

   var oLi = document.createElement("li");

   var oDate = new Date();

   oLi.innerHTML = "<div class=\"userPic\"><img src=\"" + get.byClass("current", get.byId("face"))[0].src + "\"></div>\

        <div class=\"content\">\

         <div class=\"userName\"><a href=\"javascript:;\">" + oUserName.value + "</a>:</div>\

        <div class=\"msgInfo\">" + oConBox.value.replace(/<[^>]*>|&nbsp;/ig, "") + "</div>\

        <div class=\"times\"><span>" + format(oDate.getMonth() + 1) + "\u6708" + format(oDate.getDate()) + "\u65e5 " + format(oDate.getHours()) + ":" + format(oDate.getMinutes()) + "</span><a class=\"del\" href=\"javascript:;\">\u5220\u9664</a></div>\

        </div>";

   //插入元素

   aLi.length ? oUl.insertBefore(oLi, aLi[0]) : oUl.appendChild(oLi);

   

   //重置表单

   get.byTagName("form", oMsgBox)[0].reset();

   for (i = 0; i < aImg.length; i++) aImg[i].className = "";

   aImg[0].className = "current";

   

   //将元素高度保存

   var iHeight = oLi.clientHeight - parseFloat(css(oLi, "paddingTop")) - parseFloat(css(oLi, "paddingBottom"));

   var alpah = count = 0;

   css(oLi, {"opacity" : "0", "height" : "0"}); 

   timer = setInterval(function ()

   {

    css(oLi, {"display" : "block", "opacity" : "0", "height" : (count += 8) + "px"});

    if (count > iHeight)

    {

     clearInterval(timer);

     css(oLi, "height", iHeight + "px");

     timer = setInterval(function ()

     {

      css(oLi, "opacity", (alpah += 10));

      alpah > 100 && (clearInterval(timer), css(oLi, "opacity", 100))

     },30)

    }

   },30);

   //调用鼠标划过/离开样式

   liHover();

   //调用删除函数

   delLi()

  }

 };

 

 //事件绑定, 判断字符输入

 EventUtil.addHandler(oConBox, "keyup", confine); 

 EventUtil.addHandler(oConBox, "focus", confine);

 EventUtil.addHandler(oConBox, "change", confine);

 

 //输入字符限制

 function confine ()

 {

  var iLen = 0;  

  for (i = 0; i < oConBox.value.length; i++) iLen += /[^\x00-\xff]/g.test(oConBox.value.charAt(i)) ? 1 : 0.5;

  oMaxNum.innerHTML = Math.abs(maxNum - Math.floor(iLen)); 

  maxNum - Math.floor(iLen) >= 0 ? (css(oMaxNum, "color", ""), oCountTxt.innerHTML = "\u8fd8\u80fd\u8f93\u5165", bSend = true) : (css(oMaxNum, "color", "#f60"), oCountTxt.innerHTML = "\u5df2\u8d85\u51fa", bSend = false)

 }

 //加载即调用

 confine();  

 

 //广播按钮鼠标划过样式

 EventUtil.addHandler(oSendBtn, "mouseover", function () {this.className = "hover"});

 //广播按钮鼠标离开样式

 EventUtil.addHandler(oSendBtn, "mouseout", function () {this.className = ""});

 

 //li鼠标划过/离开处理函数

 function liHover()

 {

  for (i = 0; i < aLi.length; i++)

  {

   //li鼠标划过样式

   EventUtil.addHandler(aLi[i], "mouseover", function (event)

   {

    this.className = "hover";

    oTmp = get.byClass("times", this)[0];

    var aA = get.byTagName("a", oTmp);

    if (!aA.length)

    {

     var oA = document.createElement("a");     

     oA.innerHTML = "删除";

     oA.className = "del";

     oA.href = "javascript:;";

     oTmp.appendChild(oA)

    }

    else

    {

     aA[0].style.display = "block";

    }

   });

   //li鼠标离开样式

   EventUtil.addHandler(aLi[i], "mouseout", function ()

   {

    this.className = "";

    var oA = get.byTagName("a", get.byClass("times", this)[0])[0];

    oA.style.display = "none" 

   })

  }

 }

 liHover();

 

 //删除功能

 function delLi()

 {

  var aA = get.byClass("del", oUl);

  

  for (i = 0; i < aA.length; i++)

  {

   aA[i].onclick = function ()

   {

    var oParent = this.parentNode.parentNode.parentNode;

    var alpha = 100;

    var iHeight = oParent.offsetHeight;

    timer = setInterval(function ()

    {

     css(oParent, "opacity", (alpha -= 10));

     if (alpha < 0)

     {

      clearInterval(timer);      

      timer = setInterval(function ()

      {

       iHeight -= 10;

       iHeight < 0 && (iHeight = 0);

       css(oParent, "height", iHeight + "px");

       iHeight == 0 && (clearInterval(timer), oUl.removeChild(oParent))

      },30)

     } 

    },30);   

    this.onclick = null 

   }   

  }

 }

 delLi();

 

 //输入框获取焦点时样式

 for (i = 0; i < aFtxt.length; i++)

 {

  EventUtil.addHandler(aFtxt[i], "focus", function () {this.className = "active"});  

  EventUtil.addHandler(aFtxt[i], "blur", function () {this.className = ""})

 }

 

 //格式化时间, 如果为一位数时补0

 function format(str)

 {

  return str.toString().replace(/^(\d)$/,"0$1")

 }

 

 //头像

 for (i = 0; i < aImg.length; i++)

 {

  aImg[i].onmouseover = function ()

  {

   this.className += " hover"

  };

  aImg[i].onmouseout = function ()

  {

   this.className = this.className.replace(/\s?hover/,"")

  };

  aImg[i].onclick = function ()

  {

   for (i = 0; i < aImg.length; i++) aImg[i].className = "";

   this.className = "current" 

  }

 }

});

</script>

</head>

<body>

<div id="msgBox">

    <form>

        <h2>有什么新鲜事要告诉大家</h2>

        <div>

            <input id="userName" class="f-text" value="" />

            <p id="face"><img src="http://tp2.sinaimg.cn/1787516913/50/1282184635/1" class="current" /><img src="http://www.toyean.com/microblog/images/headpic/headp_149f8ad130f8929b.jpg" /><img src="http://www.toyean.com/microblog/images/headpic/headp_d1a3edba35e37809.jpg" /><img src="http://www.toyean.com/microblog/images/headpic/headp_11a439f37adcb0d5.jpg" /><img src="http://www.toyean.com/microblog/images/headpic/headp_2bc99fd7320406be.jpg" /><img src="http://tp2.sinaimg.cn/1581621517/50/5604025885/0" /><img src="http://ww2.sinaimg.cn/thumbnail/6a8b57f1jw1dgawxf46hej.jpg" /><img src="http://www.toyean.com/microblog/images/headpic/headp_c5102d856fb2fc77.jpg" /></p>

        </div>

        <div><textarea id="conBox" class="f-text"></textarea></div>

        <div class="tr">

            <p>

                <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>

                <input id="sendBtn" type="button" value="" title="快捷键 Ctrl+Enter" />

            </p>

        </div>

    </form>

    <div class="list">

        <h3><span>大家在说</span></h3>

        <ul>

            <li>

                <div class="userPic"><img src="http://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>

                <div class="content">

                    <div class="userName"><a href="javascript:;">Toyean</a>:</div>

                    <div class="msgInfo">新增删除广播功能。</div>

                    <div class="times"><span>07月05日 15:14</span><a class="del" href="javascript:;">删除</a></div>

                </div>

            </li>

            <li>

                <div class="userPic"><img src="http://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>

                <div class="content">

                    <div class="userName"><a href="javascript:;">Toyean</a>:</div>

                    <div class="msgInfo">新增Ctrl+Enter快捷键发送广播。</div>

                    <div class="times"><span>07月05日 12:20</span><a class="del" href="javascript:;">删除</a></div>

                </div>

            </li>

            <li>

                <div class="userPic"><img src="http://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>

                <div class="content">

                    <div class="userName"><a href="javascript:;">Toyean</a>:</div>

                    <div class="msgInfo">新增选择头像功能。</div>

                    <div class="times"><span>07月05日 12:08</span><a class="del" href="javascript:;">删除</a></div>

                </div>

            </li>

            <li>

                <div class="userPic"><img src="http://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>

                <div class="content">

                    <div class="userName"><a href="javascript:;">Toyean</a>:</div>

                    <div class="msgInfo">增加了记录广播时间的功能。</div>

                    <div class="times"><span>07月04日 16:55</span><a class="del" href="javascript:;">删除</a></div>

                </div>

            </li>

            <li>

                <div class="userPic"><img src="http://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>

                <div class="content">

                    <div class="userName"><a href="javascript:;">Toyean</a>:</div>

                    <div class="msgInfo">增加了输入字符检测功能，英文/半角为半个字符，汉字/全角为一个字符。</div>

                    <div class="times"><span>07月04日 08:30</span><a class="del" href="javascript:;">删除</a></div>

                </div>

            </li>

            <li>

                <div class="userPic"><img src="http://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>

                <div class="content">

                    <div class="userName"><a href="javascript:;">Toyean</a>:</div>

                    <div class="msgInfo">仿腾讯微博效果，欢迎大家测试！</div>

                    <div class="times"><span>07月03日 20:19</span><a class="del" href="javascript:;">删除</a></div>

                </div>

            </li>

        </ul>

    </div> 

</div>

</body>

</html>
转载自：拓源网，http://www.toyean.com/post/226.html
标签： CSS HTML Javascript
仅供学习参考，交流意见。
拓源网，有技术您就来！http://www.toyean.com
TOP
‹‹ 上一主题 | 下一主题 ››