点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)
效果：
思路：
利用多功能浮动运动框架实现微博效果，首先，将textarea中的属性添加到新创建的li里面然后，再将li添加到ul里面，再利用浮动运动框架将数据动态的显示出来。
代码：
<head runat="server">
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#ul1
{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 10px auto;
overflow: hidden;
}
#ul1 li
{
list-style: none;
padding: 4px;
border-bottom: 1px #999 dashed;
overflow: hidden;
opacity: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btn');
var txt = document.getElementById('t1');
var oUl = document.getElementById('ul1');
btn.onclick = function () {
var cLi = document.createElement('li');
cLi.innerHTML = txt.value; //将数据添加到li里面
txt.value = '';
if (oUl.children.length > 0) { //判断是否已经有li，如果有那么就插入，如果没有那么就新建
oUl.insertBefore(cLi, oUl.children[0]);
} else {
oUl.appendChild(cLi);
}
var iHeight = cLi.offsetHeight; //获得li的高度
cLi.style.height = '0';
move(cLi, { height: iHeight }, function () { //然后利用浮动运动将数据显示出来
move(cLi, { opacity: 100 });
});
}
}
//------------------------------------------------------------------------------------
//获取非行间样式
function getStyle(ojb, name) {
if (ojb.currentStyle) {
return ojb.currentStyle[name];
}
else {
return getComputedStyle(ojb, false)[name];
}
}
//缓冲运动json的应用
//json{attr,finsh}
//json{width:200,height:200}
function move(obj, json, fnName) { //obj是对象，Json是对象的属性， fnName是函数
clearInterval(obj.timer); //关闭之前的计时器
obj.timer = setInterval(function () {
var timeStop = true; //记录属性是否都已经执行完成
for (var attr in json) { //遍历json中的数据
var oGetStyle = 0;
if (attr == 'opacity') { //判断透明度
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //透明度取整，然后转换完后赋值
}
else {
oGetStyle = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - oGetStyle) / 5; //求速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整
if (oGetStyle != json[attr])
timeStop = false;
if (attr == 'opacity') { //透明度
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //给透明度赋值
obj.style.opacity = (oGetStyle + speed) / 100;
}
else {
obj.style[attr] = oGetStyle + speed + 'px'; //移动div
}
}
if (timeStop) { //如果所有属性都已经执行完成，那么就关闭计时器
clearInterval(obj.timer);
if (fnName) { //当关闭计时器后要执行的函数
fnName();
}
}
}, 30)
}
//------------------------------------------------------------------------------------
</script>
</head>
<body>
<textarea id="t1"></textarea>
<input type="button" id="btn" value="发布" />
<ul id="ul1">
<li style="display: none;"></li>
</ul>
</body>
点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)的更多相关文章
- 原生JS+tween.js模仿微博发布效果
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: <!DOCTYPE ht ...
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
- js实现小功能 动态赋值
- 常用小功能js函数-函数防抖
函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时.这个我经常用到/** * 函数防抖 * fun 需要延时执行的函数 * delayTime 延时时间 * **/export ...
- js/jq 小功能函数
1.点击复制内容到剪贴板 function copyToClip(str) { var save = function(e) { e.clipboardData.setData('text/plain ...
- js实现小时钟,js中Date对象的使用?
介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...
- JS学习笔记 - 微博发布效果
<script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...
- js小功能整理
/** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...
- js小功能记录
个人日常中遇到的js小功能记录,方便查看. /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [ ...
随机推荐
- Sys.dm_os_wait_stats Sys.dm_performance_counters
wait_type waiting_tasks_count wait_time_ms max_wait_time_ms signal_wait_time_ms MISCELLANEOUS 0 0 0 ...
- 关于热插拔usb hotplug /proc/sys/kernel mdev udev b...
转:http://www.360doc.com/content/10/0527/18/9922_29835045.shtml 这篇文章说的很好http://blog.chinaunix.net/u1/ ...
- 【js】js数组置空的三种方式
方式1: var arr = new Array(1,2,3); alert(arr); arr.splice(0, arr.length); alert(arr); 方式2: var arr = n ...
- C/C++控制台输出时设置字体及背景颜色
1.改变整个控制台的颜色用 system("color 0A"); 其中color后面的0是背景色代号,A是前景色代号.各颜色代码如下: 0=黑色 1=蓝色 2=绿色 3=湖蓝色 ...
- easyui 消息提示框
1.浏览器消息提示框 浏览器弹出框,可以在浏览器设置中被屏蔽掉,导致效果失效 alert() 2.easyui 框架提供的消息框 easyui 框架自带的消息框,不可以被屏蔽. $.messager. ...
- hadoop-2.0.0-cdh4.6.0 安装
1.创建hadoop用户[所有操作都是root,在所有master和slaver上]1).创建hadoop用户:adduser hadoop2).更换密码:passwd hadoop========= ...
- [转]How to solve SSIS error code 0xC020801C/0xC004700C/0xC0047017
本文转自:http://www.codeproject.com/Articles/534651/HowplustoplussolveplusSSISpluserrorpluscodeplus0xC B ...
- 【android开发】10款实用的Android UI工具，非常有用！
移动应用的UI设计就好似达摩克利斯之剑,一方面,一个视觉.交互.体验良好的UI可以加强应用在用户心目中的形象和识别性.而另一方面,一个体验糟糕的UI设计不仅无法让用户沉浸在应用中,还会造成用户对应用产 ...
- linux ubuntu下abaqus-6.14安装破解完全指南
本人亲测可用 目录 安装前准备 安装过程 机器配置 腾讯云服务器 ubuntu server 16.10 1.首先要在服务器上安装gui及相关依赖 sudo apt-get install ubunt ...
- 转：关于腾讯bugly崩溃的android so符号表使用
http://www.jikexueyuan.com/course/406_8.html