html5仿微博弹出,JS 仿腾讯发表微博的效果代码

/**

* 仿腾讯发表微博的效果

* 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);

});

});

// 广播按钮hover事件

$(_config.sendBtn).hover(function(){

!$(this).hasClass('hover') && $(this).addClass('hover');

},function(){

$(this).hasClass('hover') && $(this).removeClass('hover');

})

// 绑定事件

self._bindEnv();

},

/*

* 计算字符的长度 包括中文 数字 英文等等

* @param str

* @return 字符串的长度

*/

_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++;

}else {

totalCount+=2;

}

}

return totalCount;

},

/*

* 所有的绑定事件

*/

_bindEnv: function() {

var self = this,

_config = self.config,

_cache = self.cache;

// 文本域keyup事件

self._keyUp();

// 点击广播按钮事件

self._clickBtn();

},

/*

* 文本域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) {

html = _config.maxNum * 1 - len * 1;

}else {

html = _config.maxNum * 1 - len * 1;

}

$(_config.maxNumElem).html(html);

$(_config.maxNumElem).attr('data-html',html);

});

},

/*

* 点击广播按钮事件

*/

_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 = '

' +

                           ''+

'

' +

'

' +

'

'+inputVal+':

' +

'

'+textVal+'

' +

'

'+

''+self._format(oDate.getMonth() + 1) + "\u6708" + self._format(oDate.getDate()) + "\u65e5 " + self._format(oDate.getHours()) + ":" + self._format(oDate.getMinutes())+''+

'删除'+

'

' +

'

';

// 插入元素

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({

'opacity' : 0

},500,function(){

$that.remove();

});

});

},function(){

$(this).hasClass('hover') && $(this).removeClass('hover');

!$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');

});

},

/*

* height

*/

_animate: function(oLi) {

var self = this;

var iHeight = $(oLi).height(),

alpah = 0,

timer,

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});

alpah > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));

},30);

}

},30);

}

};

// 初始化代码

$(function(){

new Microblog({});

});