JQuery: 微博演示
演示图：
完成图：
微博演示代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.dvOut {border:1px solid black;
position:absolute;
left:86px;width:465px;
top:110px;height:156px;
}
.txtAra {border:1px black solid;
left:87px;width:427px;
top:112px;height:66px;
}
.aa {
}
.dvTopic,.dvFriend,.dvFace,.dvPhoto,.dvVideo {width:22px;
top:204px;height:15px;
}
.dvTopic {
left:120px;
}
.dvFriend {
left:161px;
}
.dvFace {
left:204px;
}
.dvPhoto {
left:244px;
}
.dvVideo {
left:286px;
}
.dvShowCharNum {left:422px;top:220px;
width:100px;height:18px;
}
.btnSend {left:444px;top:214px;
width:94px;height:27px;
background-color:#b6ff00;
}
</style>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
//发送按钮高亮显示
$(function () {
$('.dvSend .btnSend').click(function () {
$(this).css('backgroundPosition', '0 -195px').css('backgroundColor', 'red');
}).mouseout(function () {
$(this).css('backgroundPosition', '-117px -165px').css('backgroundColor', '#b6ff00');
});
});
</script>
<script type="text/javascript">
//显示剩余多少字符
$(function () {
$('.dvTxt .txtAra').change(function () {
var len = - $(this).val().length;
if (len >= ) {
$('.sp1').html('还剩<em>' + len + '</em>个字符');
} else {
$('.dvShowCharNum .sp1').html('超出<font color="red"><em>' + Math.abs(len) + '</em></font>个字符');
}
});
var interId = setInterval(function () {
$('.dvTxt .txtAra').change();
}, )
});
</script>
<script type="text/javascript">
//显示话题
$(function () {
$('.dvTopic a').click(function () {
$(this).css({ 'backgroundPosition': '0 -195px', 'cursor': 'pointer' });
}).click(function () {
if ($('.dvTxt .txtAra').val().length <= ) {
$('.dvTxt .txtAra').val('#显示话题标题#'); //selectRange(1,7) 高亮显示
}
}).mouseout(function () {
$(this).css('backgroundPosition', '-117px -165px');
});
});
</script>
<script type="text/javascript">
//显示朋友
$(function () {
$('.dvFriend a').click(function () {
if ($('#dvF').length > ) {
$('#dvF').remove();
}
var dvFObj = $('<div id="dvF" style="width:100px;border:1px solid black;background-color:green;position:absolute;"></div>').appendTo($('body'));
var dvX = $(this).offset().left + 'px';
var dvY = $(this).offset().top + $(this).height() + 'px';
dvFObj.css({ 'left': dvX, "top": dvY });
var spp1Obj = $('<span id="spp1" style="background-color:gray;cursor:pointer;float:right;">关闭</span>').click(function () {
$(this).parent().remove();
}).appendTo('#dvF');
var friends = ['涂函', '鞠婧祎', '朴智妍', '朴妮麦', '陈淑君', '刘红霞', '易倾城', '唯我独尊'];
var uu1Obj = $('<ul id="uu1" style="list-style-type:none;clear:both;margin:0px;padding:0px;"></ul>').appendTo(dvFObj);
for (var i = ; i < friends.length; i++) {
var li1Obj = $('<li style="cursor:pointer;font-color:yellow;">@' + friends[i] + '</li>').click(function () {
if ($('.dvTxt .txtAra').val() == '#显示话题标题#') {
$('.dvTxt .txtAra').val($(this).text());
} else {
$('.dvTxt .txtAra').val($('.dvTxt .txtAra').val() + $(this).text());
}
}).appendTo(uu1Obj)
}
});
});
</script>
<script type="text/javascript">
//显示表情
$(function () {
var dict = {
"00.gif": "", "01.gif": "", "02.gif": "", "03.gif": "", "04.gif": "", "05.gif": "", "06.gif": "", "07.gif": "", "08.gif": "", "09.gif": "",
"10.gif": "", "11.gif": "", "12.gif": "", "13.gif": "", "14.gif": "", "15.gif": "", "16.gif": "", "17.gif": "", "18.gif": "", "19.gif": "",
"20.gif": "", "21.gif": "", "22.gif": "", "23.gif": "", "24.gif": "", "25.gif": "", "26.gif": "", "27.gif": "", "28.gif": "", "29.gif": "",
"30.gif": "", "31.gif": "", "32.gif": "", "33.gif": "", "34.gif": "", "35.gif": "", "36.gif": "", "37.gif": "", "38.gif": "", "39.gif": "",
"40.gif": "", "41.gif": "", "42.gif": "", "43.gif": "", "44.gif": "", "45.gif": "", "46.gif": ""
};
$('.dvFace a').click(function () {
if ($('#dvFaceImg').length > ) {
$('#dvFaceImg').remove();
}
var dvFaceImg = $('<div id="dvFaceImg" style="width:300px;position:absolute;background-color:#B56;border:1px solid blue;"></div>').appendTo('body');
var dvXX = $(this).offset().left + 'px';
var dvYY = $(this).offset().top + $(this).height() + 'px';
dvFaceImg.css({"left":dvXX,"top":dvYY});
$('<span id="spShowFace" style="float:left">表情<span>').appendTo(dvFaceImg);
$('<span id="spCloseFace" style="float:right;background-color:gray;cursor:pointer;">关闭</span>').click(function () {
$(this).parent().remove();
}).appendTo(dvFaceImg);
var dvFaceImage = $('<div id="dvFaceImage" style="clear:both;"></div>').appendTo(dvFaceImg);
for (var key in dict) {
$('<img src="/face/' + key + '" title="' + dict[key] + '" style="cursor:pointer;"></img>').click(function () {
if ($('.dvTxt .txtAra').val() == "#显示话题标题#") {
$('.dvTxt .txtAra').val('[' + $(this).attr('title') + ']');
} else {
$('.dvTxt .txtAra').val($('.dvTxt .txtAra').val() + '[' + $(this).attr('title') + ']');
}
}).appendTo(dvFaceImage);
}
});
});
</script>
</head>
<body style="background-color:#0094ff">
<div>
<div class="dvOut">
<div>
<label><strong>夏天来了，你懂得......</strong></label>
</div>
<div class="dvTxt">
<textarea class="txtAra"></textarea>
</div>
<span class="dvTopic">
<a class="aa" href="javascript:void(0)">话题</a>
</span>
<span class="dvFriend">
<a class="aa" href="javascript:void(0)">朋友</a>
</span>
<span class="dvFace">
<a class="aa" href="javascript:void(0)">表情</a>
</span>
<span class="dvPhoto">
<a class="aa" href="javascript:void(0)">照片</a>
</span>
<span class="dvVideo">
<a class="aa" href="javascript:void(0)">视频</a>
</span>
<div class="dvShowCharNum">
<span class="sp1"></span>
</div>
<div class="dvSend">
<input class="btnSend" type="button" value="广播" />
</div>
</div>
</div>
</body>
</html>
JQuery: 微博演示
JQuery: 微博演示的更多相关文章
- 60款很酷的 jQuery 幻灯片演示和下载【转】
jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...
- jQuery Vlidate 演示样例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jquery微博实例
1.代码实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- JQuery slideToggle 演示简单的 Slide Panel 效果。
------------------html--------------------------------- <html xmlns="http://www.w3.org/1999/ ...
- 黑马day16 jquery案例演示
案例一: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
- 9款超酷的jQuery/CSS3插件
Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...
随机推荐
- Hibernate从入门到精通（六）一对一双向关联映射
在上次的博文Hibernate从入门到精通(五)一对一单向关联映射中我们讲解了一下一对一单向关联映射,这次我们继续讲解一下与之对应的一对一双向关联映射. 一对一双向关联 与一对一单向关联映射所不同的的 ...
- 深入js的面向对象学习篇（继承篇）——温故知新（三）
写这篇有关继承的文章时,突然想起,几天前的面试.因为习惯在学习知识的时候加上自己的理解,很喜欢用自己话来解释,于是乎当面试被问起继承原理时,噼里啪啦一大堆都是自己组织的话,(也可能是因为个人紧张.外加 ...
- The 9th Zhejiang Provincial Collegiate Programming Contest->Problem D:D - Draw Something Cheat
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3603 题意:在给出的字符串中找出每行都出现的字母按字典序排序. #incl ...
- 电商安全无小事，如何有效地抵御 CSRF 攻击？
现在,我们绝大多数人都会在网上购物买东西.但是很多人都不清楚的是,很多电商网站会存在安全漏洞.比如乌云就通报过,国内很多家公司的网站都存在 CSRF 漏洞.如果某个网站存在这种安全漏洞的话,那么我们在 ...
- 安装Redis完整过程
概述 首先报告一下我系统的版本: [root@firefish init.d]# cat /etc/issue 系统版本信息如下: 引用 CentOS release 6.4 (Final) K ...
- hbase 使用备忘
hbase是基于hadoop的,所以hbase服务器必须启动hadoop,这点很重要. 当然hbase其实只用到了dadoop的一个组件 1. 启动hadoop-dfs 在主上执行如下命令,可以把主和 ...
- codeforces #313 div1 B
模拟判定就可以了 判定字符串是否相等用hash来判断 QAQ 值得一提的是一开始我交的时候T了 结果我将递归的顺序调整了一下就A了 (并不知道为什么 #include<cstdio> #i ...
- memcached部署memcached环境及PHP扩展
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://lxsym.blog.51cto.com/1364623/876209 Memca ...
- PHP集成支付宝快速实现充值功能
http://blog.lixiphp.com/php-alipay-fast-chongzhi/#axzz2tOypIl4r
- 功能齐全、效率一流的免费开源数据库导入导出工具（c#开发，支持SQL server、SQLite、ACCESS三种数据库），每月借此处理数据5G以上
软件名:DataPie 功能:支持SQL server.SQLite.ACCESS数据库的导入.导出.存储过程调用,支持EXCEL2007.EXCEL2003.ACCESS2007. CSV文件导入数 ...