欢迎来到亿搜云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

Javascript 微博发留言效果代码

       对话框和灯箱     2016-02-16     eycms     117     0    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w.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 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 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(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 .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("u8bf7u586bu5199u60a8u7684u59d3u540d");

oUserName.focus()

}

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

{

alert("u59d3u540du75312-8u4f4du5b57u6bcdu3001u6570u5b57u3001u4e0bu5212u7ebfu3001u6c49u5b57u7ec4u6210uff01");

oUserName.focus()

}

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

{

alert("u968fu4fbfu8bf4u70b9u4ec0u4e48u5427uff01");

oConBox.focus()

}

else if(!bSend)

{

alert("u4f60u8f93u5165u7684u5185u5bb9u5df2u8d85u51fau9650u5236uff0cu8bf7u68c0u67e5uff01");

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(/<[^>]*>| /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:;">u5220u9664</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 = "u8fd8u80fdu8f93u5165", bSend = true) : (css(oMaxNum, "color", "#f60"), oCountTxt.innerHTML = "u5df2u8d85u51fa", 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="img/face1.gif" class="current" /><img  src="img/face2.gif" /><img  src="img/face3.gif" /><img  src="img/face4.gif" /><img  src="img/face5.gif" /><img  src="img/face6.gif" /><img  src="img/face7.gif" /><img  src="img/face8.gif" /></p>

        </div>

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


--结束END--

本文链接: http://eycms.cn/resources/dialog/1126.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“亿搜云”
"亿搜云平台前端开发教学"
每日干货技术分享
 

×

成为 亿搜云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

亿搜云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 40819446

客服电话: 15250286283

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

亿搜云平台手机端