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 插件,这些插件按用途主要有以下类别:网 ...
随机推荐
- MVC5 Bundles发布到IIS失效问题解决方案
MVC中Bundles可以提高代码的可重用性 我每个页面都需要用到这十几个JS+CSS 当我把MVC发布到服务器以后,Bundles中的JS和CSS会失效的时候 宝宝的心里是崩溃的.... 查了很多资 ...
- android应用activity中调出输入法后界面调整问题的解决
在自己写的一个小应用中发现一个问题,当调出输入法后界面最下方的一个按钮被挤到了输入法的上面,这样很不美观,所以找了一下解决办法记录如下: 在AndroidManifest.xml文件中找到对应的act ...
- Critical Rendering Path
1.生成 dom & cssom https://developers.google.com/web/fundamentals/performance/critical-rendering-p ...
- (转)深入理解SP、LR和PC
网址:http://blog.csdn.net/zhou1232006/article/details/6149548 深入理解ARM的这三个寄存器,对编程以及操作系统的移植都有很大的裨益. 1.堆栈 ...
- mir9-lua——《热血沙城》45度ARPG手游-Lua移植版
mir9——<热血沙城>,是9秒论坛开源的一个使用Cocos2d-x-2.2.1引擎开发的45度ARPG手游Demo,源代码为c++.mir9-lua是mir9的Lua移植版,使用Quic ...
- sed 常见用法
sed 1. 移除空白行 sed '/^$/d' file 2. 直接在文本中进行替换 sed 's/pattern/replacement/g' -i file -i[SUFFIX], --in-p ...
- 过长文字自动换行的技巧 Word-Break Word-Wrap
在很多时候,为了防止内容过长把表格或容器撑破, 我们都需要为容器加上自动换行的功能. 实现自动换行,用CSS来实现,通常有两种方式: word-break: 取值为 normal, break-all ...
- ExtJS4.2学习(10)分组表格控件--GroupingGrid（转）
鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...
- BZOJ 3160 万径人踪灭 解题报告
这个题感觉很神呀.将 FFT 和 Manacher 有机结合在了一起. 首先我们不管那个 “不能连续” 的条件,那么我们就可以求出有多少对字母关于某一条直线对称,然后记 $T_i$ 为关于直线 $i$ ...
- asp.net MVC日志插件Log4Net学习笔记一:保存日志到本地
log4net(Log For Net)是Apache开源的应用于.Net框架的日志记录工具,详细信息参见Apache网站.它是针对Java的log4j(Log For Java的)姊妹工具.用过lo ...