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 插件,这些插件按用途主要有以下类别:网 ...
随机推荐
- 第一个js库文件
<!DOCTYPE html> <html xmlns=; ; } }; })(); ...
- MoonWarriors-lua——《雷电战机》游戏-Lua移植版
MoonWarriors是一个使用Cocos2d-Html5引擎开发的类似雷电战机的游戏Demo,源代码发布在Cocos2d-x官网的引擎示例当中.MoonWarriors-lua是为了学习Cocos ...
- 360随身wifi怎样购买？360随身wifi怎样预约？
---恢复内容开始--- 360随身wifi怎样购买 想要购买360随身Wifi,可以登录360随身Wifi的官网wifi.360.cn,或者直接登陆京东商城进行购买,售价为19.9元,分黑.白两色. ...
- Shiro 缓存失效以后的一个问题
shiro 1.2.2和1.2.3 为shiro设置了缓存,但是当服务器运行几个小时后,页面判断 <shiro:hasPermission name="admin"> ...
- 贪心算法——将正整数变为1
题目链接http://toutiao.com/a6320936270101528833/ 为避免链接失效,再粘贴一下题目内容: 给你一个数n,有3种操作: 1.这个数加1 2.这个数减1 3.如果这个 ...
- org.hibernate.LazyInitializationException
1.org.hibernate.LazyInitializationException: failed to lazily initialize a collection of role: com.c ...
- 你不需要jQuery(二)
完全没有否定jQuery的意思,jQuery是一个神奇的.非常有用的工具,可以节省我们大量的时间. 但是,有些时候,我们只需要jQuery的一个小功能,来完成一个小任务,完全没有必要加载整个jQuer ...
- c#保留小数点后两位
double d = 23423.24234234d; Response.Write(d.ToString("0.00"));
- Android支付接入（五）：机锋网
原地址:http://blog.csdn.net/simdanfeg/article/details/9012083 前边已经陆续跟大家走了一遍运营商和支付宝付费接入,今天跟大家一起看看机锋网的支付接 ...
- python繁体中文到简体中文的转换
处理中文字符串遇到了繁体和简体中文的转换,python版: 1.下载zh_wiki.py及langconv zh_wiki.py:https://github.com/skydark/nstool ...