TencentのWeiboエフェクトコードを模倣したJS_JavaScriptスキル

body,div,h2,h3,ul,li,p{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{text-装飾:下線;}
ul{list-style-type:none;}
body{color:#333;background:#3c3a3b;font:12px/1.5 5b8b4f53;}
#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 5fae8f6f96c59ed1;}
#msgBox form{background:url(img/boxBG.jpg)repeat-x 0bottom;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ソリッド #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{float:left;display:inline;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 ;高さ:30px;カーソル:ポインタ;左マージン:10px;背景:url(img/btn.png) 繰り返しなし;}
#sendBtn.hover{background-position:0 -30px;}
#msgBox フォーム .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;背景:#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 破線 #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
#msgBox .list ul li.hover{背景:#f5f5f5;}
#msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1pxソリッド #ccc;border-radius:3px ;}
#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 spa{float:left;}
#msgBox .list .times a{float:right;color:#889db6;}
.tr{overflow:hidden;zoom:1;}
.tr p{float:right;line-height:30px;}
.tr *{float:left;}
.hidden {display:none;}

/**
* 仿腾讯发表微博的效果
* 1.目前没有发ajax请求 后台没有记录 所以刷新页面 会清掉
* 2. 时间是用的是客户端时间 假如客户端时间错误的话 那么时间也会受影响。
* 目前就这样交互 具体的思路不太复杂 如果项目中用到这样的 可以根据具体的需求更改
* @constructor Microblog
* @date 2013-12-23
* @author tugenhua
* @email 879083421@qq.com
*/

function Microblog(options) {

this.config = {
maxNum : 140, // 最大的字符数
targetElem : '.f-text', // 输入框 或者文本域的class名
maxNumElem : '.maxNum', // 还能输入多少字容器
sendBtn : '#sendBtn', // 广播按钮
face : '#face', // 表情容器
activeCls : 'active', // 鼠标点击输入框add类
currentCls : 'current', // 鼠标点击face头像时 增加的类名
inputID : '#userName', // 输入框ID
textareaId : '#conBox', // 文本域ID
list : '#list-msg', // 大家在说的容器
callback : null // 动态广播完后的回调函数
};

this.cache = {};
this.init(options);
}

Microblog.prototype = {

constructor: Microblog,

init: function(options) {
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;

// 点击输入框input 文本域 textarea 边框的变化
$(_config.targetElem).each(function(index,item){

$(item).unbind('focus');
$(item).bind('focus',function(e){
!$(this).hasClass(_config.activeCls) && $(this).addClass(_config.activeCls);
});
$(item).unbind('blur');
$(item).bind('blur',function(e){
$(this).hasClass(_config.activeCls) && $(this).removeClass(_config.activeCls);
});
});

// 点击face头像 add(增加)类名
var faceImg = $('img',$(_config.face));
$(faceImg).each(function(index,item){
$(item).unbind('click');
$(item).bind('click',function(e){
$(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
});
});

// ブロードキャスト ボタン ホバー イベント
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover ');
},function(){
} $(this).hasClass('hover') && $(this).removeClass('hover');
})

// バインディング イベント
文字列の長さ
*/
_countCharacters: function(str) > var totalCount = 0;
for (var i=0; i var c = str.charCodeAt(i);
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f) ) {
totalCount ;
/*
* すべてのバインディング イベント
*/
_bindEnv: function() {
var self = this,
_config = self.config,
_cache = self.cache;

// テキスト フィールド キーアップ イベント
self ._keyUp();

🎜> _keyUp: function() {
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.textareaId).unbind( 'keyup') ;
$(_config.textareaId).bind(' keyup',function(){
var len = self._countCharacters($(this).val()),
html;
if (_config.maxNum * 1 >= len * 1) {
* 1;,
/*
* 点击广播按钮事件
*/
_clickBtn: function() {

var self = this,
_config = self.config,
_cache = self.cache;
var reg = /^\s*$/g;
$(_config.sendBtn).unbind('click');
$(_config.sendBtn).bind('click',function(){

var inputVal = $(_config.inputID).val(),
textVal = $(_config.textareaId).val(),
maxNum = $(_config.maxNumElem).attr('data-html');
if(reg.test(inputVal)) {
alert('请输入你的姓名');
return;
}else if(reg.test(textVal)) {
alert("随便说点什么吧!");
return;
}
if(maxNum * 1 < 0) {
alert('字符超过限制 请缩减字');
return;
}
// 本来是要发ajax请求的 但是这边没有后台处理 所以目前只是客户端渲染页面
self._renderHTML(inputVal,textVal);
});
},
/*
* 把html结构渲染出来
*/
_renderHTML: function(inputVal,textVal) {
var self = this,
_config = self.config,
_cache = self.cache;
var oLi = document.createElement("li"),
oDate = new Date();
oLi.innerHTML = '

' +
                        '';
        // 插入元素
        if($(_config.list + " li").length > 0) {

            $(oLi).insertBefore($(_config.list + " li")[0]);
            self._animate(oLi);
        }else {

            $(_config.list).append(oLi);
            self._animate(oLi);

        }
        _config.callback && $.isFunction(_config.callback) && _config.callback();

        // 清空输入框 文本域的值
        self._clearVal();

        // hover事件
        self._hover();
     },
     /*
      * 格式化时间, 如果为一位数时补0
      */
    _format: function(str){
        return str.toString().replace(/^(\d)$/,"0$1");
    },
    /*
     * 获取ing src
     * @return src
     */
    _getSrc: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var faceImg = $('img',$(_config.face));

        for(var i = 0; i < faceImg.length; i++) {
if($(faceImg[i]).hasClass(_config.currentCls)) {
return $(faceImg[i]).attr('src');
break;
}
}
},
/*
* 清空值
*/
_clearVal: function() {
var self = this,
_config = self.config,
_cache = self.cache;

$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');

},
/*
* hover事件
*/
_hover: function() {
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.list + ' li').hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover').siblings().removeClass('hover');
$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).removeClass('hidden');
var $that = $(this);

// 删除イベント
$('.del',$that).unbind('click');
$('.del',$that).bind('click',function( ){

$($that).animate({
'不透明度' : 0
},500,function(){
$that.remove();
} );
});
},function(){
$(this).hasClass('hover') && $(this).removeClass('hover');
!$( '.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
});

},
/*
* 高さ
*/
_animate: function(oLi) {
var self = this;
var iHeight = $(oLi).height(),
alpah = 0,
タイマー,
count = 0;
$(oLi).css({"opacity" : "0", "height" : "0"});

timer && clearInterval(timer);
timer = setInterval(function (){
$(oLi).css({"display" : "block", "opacity" : "0", "height " : (count = 8) "px"});
if (count > iHeight){
clearInterval(timer);
$(oLi).css({ "height" : iHeight "px "});
timer = setInterval(function (){
$(oLi).css({"opacity" : alpah = 10});

アルファ > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));

},30);
}
},30);
}
};

// 初始化代码
$(function(){
new Microblog({});
});