Js仿腾讯微博效果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo1.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo1.js"></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"/>
</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 type="button" id="sendBtn" value="" title="快捷键 Ctrl+Enter"/>
</p>
</div>
</form>
<div class="list">
<h3><span>大家在说</span></h3>
<ul>
<!--<li>
<div class="userPic"><img src="img/face.gif"/></div>
<div class="content">
<div class="userName"><a href="javascript:;">永不上线</a>：</div>
<div class="msgInfo">新增删除广播功能。</div>
<div class="times"><span>07月05日 15:14</span><a class="del" href="javascript:;">删除</a></div>
</div>
</li>-->
</ul>
</div>
</div>
</body>
</html> body,div,h2,h3,ul,li,p{
margin:0px;
padding:0px;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
ul{
list-style-type:none;
}
body{
color:#333;
background:#a7ab8c;
font:12px/1.5 \5b8b\4f53;/*文字大小为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;/*背景图片 沿水平方向重复 水平位置0 垂直位置底部*/
padding:0 20px 15px;/*上0，左右20，下15*/
}
#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 {
height: 20px;
width:150px;
} #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;
width:300px;
} #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;
} #face img:hover {
opacity: 1;
} .efont {
color: red;
} /// <reference path="_references.js" /> var src = "img/face1.gif";
$(function () {
$("#sendBtn").click(function () {//当点击按钮之后
var username = $.trim($("#userName").val());//获取到输入的用户名
var con = $.trim($("#conBox").val());//获取到输入的内容
if (username == "") {
alert("请填写您的姓名");
return;
}
if ($("#conBox").val().length > 140) {
alert("输入内容超过了140个长度");
return;
}
if (con == "") {
alert("随便说点什么吧");
return;
}
var date = new Date();
var sDate = date.getMonth() + 1 + "月" + date.getDate() + "日" + date.getHours() + ":" + date.getMinutes();
var c = "<li><div class=\"userPic\"><img src=\"" + src + "\"></div>\
<div class=\"content\">\
<div class=\"userName\"><a href=\"javascript:;\">" + username + "</a>:</div>\
<div class=\"msgInfo\">" + con.replace(/<[^>]*>| /ig, "") + "</div>\
<div class=\"times\"><span>" + sDate + "</span><a class=\"del\" href=\"javascript:;\">删除</a></div>\
</div></li>";
$(".list ul").prepend($(c).hide().fadeIn(1000).bind("mouseover", function () {
$(this).find(".del").show().one("click", function () {
$(this).parent().parent().parent().remove();
});
$(this).addClass("hover");
}).bind("mouseout", function () { $(this).find(".del").hide(); $(this).removeClass("hover"); }));
}); $("#face img").click(function () {
src = $(this).attr("src");
$(this).css("opacity", 1);
}); $("#conBox").keyup(function () {//当在文本框里面输入内容的时候触发事件
var length = $("#conBox").val().length;//获取到输入内容的长度
var len = 140 - length;
if (len < 0) {
$(".countTxt").text("已超出");
len = Math.abs(len);
$(".maxNum").text(len).addClass("efont");
}
else {
$(".countTxt").text("还能输入");
$(".maxNum").text(len).removeClass("efont");
}
});
});
Js仿腾讯微博效果的更多相关文章
- 完美拖拽 &&仿腾讯微博效果&& 自定义多级右键菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现仿腾讯微博无刷新删除微博效果代码
这里演示JS仿腾讯微博无刷新删除效果,将显示在微博列表里的内容删除,运用AJAX技术,无刷新删除微博的内容,参考性强,希望对初学AJAX的朋友有所帮助. 在线演示地址如下: http://demo.j ...
- JS 仿腾讯发表微博的效果
JS 仿腾讯发表微博的效果 最近2天研究了下 腾讯发表微博的效果 特此来分享下,效果如下: 在此分享前 来谈谈本人编写代码的习惯,很多人会问我既然用的是jquery框架 为什么写的组件不用Jquery ...
- 仿腾讯微博的一个弹出框 v0.1 beta
仿腾讯微博的一个弹出框 v0.1 beta 代码写的不太好,新手请大家海涵,只为博君一笑,勿放在心上. 写在这里留作纪念,也许以后用的到. 效果 CSS .prompt{ position: ab ...
- ASP.NET 仿腾讯微博提示“还能输入*个字符”的实现
textbox如果设置TextMode="MultiLine"则 它的MaxLength设置的值就无效:为了能达到像腾讯微薄.新浪微薄那样的提示的效果(腾讯和新浪微薄文本框用到的应 ...
- JS仿Android Toast提示效果
注:这个需要jquery文件来提示支持,所以需要先调用Jquery. <script type="text/javascript" src="js/jquery.j ...
- js仿qq分组折叠效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 仿易讯clientloading效果
以下来实现一个loading效果.详细效果例如以下: 首先对这个效果进行拆分,它由以下部分组成: 1 一个"闪电"样式的图案. 2 "闪电"图案背后是一个圆角矩 ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
随机推荐
- 关于vue项目多页面的配置
基于vue2.0生成项目,一段时间都在找如何配置成多个页面的.网上有这样的例子相对也是比较详细的,但是还是有些许不一样的地方的.所以,我还是记录下来,当然我也是参考了网上的资料的. 当然先来个vue的 ...
- Flink学习笔记-支持的数据类型
说明:本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKh ...
- kuangbin专题十二 HDU1087 Super Jumping! Jumping! Jumping! (LIS)
Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- 关于logrotate工具的日志切割
logrotate是一个非常好的文件切割工具!! 具体配置如下: /var/log/debug.log{ daily ; 每天转储 rotate ...
- 小程序获取unionId以及手机号
1.前端小程序传入后端接口的入参如下: code :临时登录凭证(必传)encryptedData:密文iv:偏移量 2.接收到入参后的java后端接口中的代码如下: @Action(value = ...
- Large Writes in Exadata FlashCache
在 Exadata存储管理软件12.2.1.1.0中,flashcache开始支持复杂排序和大量的hash join产生的临时数据写入flashcache中,而不是直接写入SAS磁盘的tempfile ...
- maven 子父工程。。。
子工程module 父工程 主要是注意路径问题..否则会报错---
- 字符串 Instant 互转
Instant inst = Instant.now(); System.out.println(inst);//2018-05-15T02:27:09.909Z String s1 = s.subs ...
- js遍历table和gridview
//遍历table var tableObj = document.getElementById("tableName");var str = "";for(v ...
- case when null then 'xx' else 'yy' end 无效
Sql Server 中使用case when then 判断某字段是否为null,和判断是否为字符或数字时的写法不一样,而且语法能正常执行, 如果不注意数据内容,很容易搞错. 错误方法: CASE ...