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 ...
随机推荐
- 10.19 qbxt国庆day3
最近的题都莫名简单 经常AK 炼金术 [问题描述] 即使是最伟大的ACM选手也是需要足够的金钱来把妹的的.于是ZYB发明了一台炼金机器. 这台机器一共有三个功能: 1.能把a位沙子变成b位石油. 2. ...
- NOIP2018初赛总结(提高组)（试题+答案+简要解析）
NOIP2018初赛总结(提高组) 更新完毕(纯手敲),如果有错误请在下面留言 单选题 T1.下列四个不同进制的数中,与其它三项数值上不相等的是 A.\((269)_{16}\) B.\((617)_ ...
- lvs 中DR模式负载均衡及keepalived
lvs DR配置 LVS负载均衡:三种负载均衡模式:DR,TUN(ip隧道),NAT,这里我们介绍DR模式 server1: 首先,配置server机yum源 方便后期实验流畅vim /etc/yum ...
- centos7-网络与防火墙常用命令
1.网络配置 vi /etc/sysconfig/network-scripts/ifcfg-ens33 BOOTPROTO="static" IPADDR=192.168.163 ...
- python模块之openpyxl扩展
主要是对openpyxl扩展进行扩展,使用归类等 1. 安装 pip install openpyxl 想要在文件中插入图片文件,需要安装pillow,安装文件:PIL-fork-1.1.7.win- ...
- 【ACM】N皇后问题
N皇后问题 #include <iostream> #include <cmath> using namespace std; ; //判断当前位置的皇后加入是否成立 bool ...
- java——平衡二叉树 AVLTree、AVLMap、AVLSet
平衡二叉树:对于任意一个节点,左子树和右子树的高度差不能超过1 package Date_pacage; import java.util.ArrayList; public class AVLTre ...
- SQL SERVER linked server Login failed for user 'NT AUTHORITY\ANONYMOUS LOGON'
昨天创建了一个View, 这个view是一系列的表达式(CTE)组成,封装了好多的业务逻辑,简化下语句如下 ;with CTE AS( ...) SELECT a.company_id ,b.comp ...
- Mockjs详细使用说明
Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 在我们的生产实际中,后端的接口往往是 ...
- java生成临时令牌和访问令牌
public String getTicket(String logo, String productId) { String aTicket = ""; SimpleDateFo ...