技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
原创 模仿QQ微博发贴特效+jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FOO API</title>
</head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javaScript">
$(function() {
//fadeout to AddContent an element
$.fn.foAddContent = function(during,_height){
during = during ? during : 300;
this.each(function(){
var obj = $(this);
obj.animate({
opacity: 1,
height:_height
}, during, function(){
obj.css({"height":'auto',"opacity":1});
});
});
return this;
};
//clear focus
$.fn.foFocus = function(content){
this.each(function(){
var obj = $(this);
obj.focus(function(){
if(obj.val() == content){
obj.val("");
}else{
//
}
});
obj.blur(function(){
if(obj.val() == ''){
obj.val(content);
}else{
//
}
})
});
return this;
};
var arrBLogliInfo = [{
name :"jackyang",
url : "http://www.163.com"
}];
var arrBLogli = [
{id:'1',title : '主打催泪弹 11.03-11.09本周电影排行榜'},
{id:'2',title : '相识20天、4次约会……明星大S即“荣升”富家少奶奶，与汪小菲闪电订婚！不说汪小菲之前的明星女友，就大S也是圈内男友连连看！【娱乐百分百-大S坎坷感情历程大回顾】 '},
{id:'3',title : '滚来滚去真是太可爱了！唉！后悔当年去四川应该抱着小熊猫拍照的。200算什么呀！《熊猫大侠》资金真是有限，想拍熊猫又不请不起真熊猫。不过话说，里面那个假的声音还是很萌的！'},
{id:'4',title : '主打催泪弹 11.03-11.09本周电影排行榜 '},
{id:'5',title : '相识20天、4次约会……明星大S即“荣升”富家少奶奶，与汪小菲闪电订婚！不说汪小菲之前的明星女友，就大S也是圈内男友连连看！【娱乐百分百-大S坎坷感情历程大回顾】 '},
{id:'6',title : '滚来滚去真是太可爱了！唉！后悔当年去四川应该抱着小熊猫拍照的。200算什么呀！《熊猫大侠》资金真是有限，想拍熊猫又不请不起真熊猫。不过话说，里面那个假的声音还是很萌的！'}
];
arrBLogli.sort();
$.each(arrBLogli,function(index,domEle){
$("#weiboBox .weibo li:first").before("<li><a href=my.php?="+ arrBLogliInfo[0].url +">"+ arrBLogliInfo[0].name +"</a> ："+ domEle.title + "</li>");
var obj_addLiFirst = $("#weiboBox .weibo li:first");
var obj_addLiFirstHeight = obj_addLiFirst.height();
obj_addLiFirst.css({"height":0, "opacity":0}).foAddContent(300, obj_addLiFirstHeight);
WBmaxNum();
})
var focusText = '你总得说点什么吧';
$("#msgTxt").foFocus(focusText);
$("#talkBox .btnSubmit").click(function(){
var msgTxtContent = $("#msgTxt").val();
if(msgTxtContent.length !=0 && msgTxtContent != focusText){
$("#weiboBox .weibo li:first").before("<li><a href=my.php?="+ arrBLogliInfo[0].url +">"+ arrBLogliInfo[0].name +"</a> ："+ msgTxtContent+ "</li>");
var obj_addLiFirst = $("#weiboBox .weibo li:first");
var obj_addLiFirstHeight = obj_addLiFirst.height();
obj_addLiFirst.css({"height":0, "opacity":0}).foAddContent(300, obj_addLiFirstHeight);
//$("#weiboBox .weibo li:last").remove();
$("#msgTxt").val(focusText);
WBmaxNum();
}else{
alert("请输入关键字!")
}
});
function WBmaxNum(){
var curLinum= $("#weiboBox .weibo li:not('.noLine')").length;
if(curLinum> 10){
$("#weiboBox .weibo li:last").remove();
}
}
});
</script>
<style type="text/css">
body{
background:#fff;
}
body,ul,li{
margin:0;
padding:0;
font:400 12px/18px Arial, Helvetica, sans-serif;
}
#weiboBox{
margin:0 auto;
overflow:hidden;
width:400px;
}
.weibo{
}
.weibo li{
border-bottom:1px solid #ccc;
padding:5px 0;
list-style:none;
}
.weibo li.noLine{
border-bottom:0 none;
padding:0px 0;
list-style:none;
}
#talkBox{
margin:12px 0 0;
}
#talkBox textarea{
margin:0 auto;
width:394px;
height:50px;
}
#talkBox .btnSubmit{
margin:5px 0;
}
#weiboBox .more{
line-height:16px;
padding:5px 0;
text-align:center;
}
</style>
<body>
<div id="weiboBox">
<ul class="weibo">
<li class="noLine"></li>
</ul>
<div class="more"><a href="#" id="moreWeiboLi">更多</a></div>
<div id="talkBox">
<div class="cntBox">
<textarea tabindex="1" autocomplete="off" name="content" accesskey="u" id="msgTxt" class="">你总得说点什么吧</textarea>
<input type="submit" value="我要广播" class="btnSubmit">
</div>
</div>
</div>
</body>
</html>