点滴积累【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 [ ...
随机推荐
- c++中const使用详解
const在c++中是一个关键字,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的安全性和可靠性,另外,在观看别人代码的时候,清晰理解const所起的作用,对理解对方的程序也有一些 ...
- UltraISO（软碟通）制作安装Ubuntu系统的U盘安装盘
1.开UltraISO(软碟通),加载要写入U盘的iso文件,注意,要求软碟通的版本是9.3以上的.如下图: 2.点击“启动光盘.写入硬盘映像: 3.开启个写入硬盘映像的窗口,硬盘驱动器那一项看清楚是 ...
- iOS：分段控件UISegmentedControl的详细使用
分段控件:UISegmentedControl 功能:分段的控制.页面的切换等. 介绍:当用户输入不仅仅是布尔值时,可使用分段控件(UISegmentedControl).分段控件提供一栏按钮 ...
- 【转载】Instagram架构分析笔记
原文地址:http://chengxu.org/p/401.html Instagram 架构分析笔记 全部 技术博客 Instagram团队上个月才迎来第 7 名员工,是的,7个人的团队.作为 iP ...
- [Python爬虫] 之九：Selenium +phantomjs抓取活动行中会议活动（单线程抓取）
思路是这样的,给一系列关键字:互联网电视:智能电视:数字:影音:家庭娱乐:节目:视听:版权:数据等.在活动行网站搜索页(http://www.huodongxing.com/search?city=% ...
- Linux环境Nginx安装与调试以及PHP安装
linux版本:64位CentOS 6.4 Nginx版本:nginx1.8.0 php版本:php5.5.28 1.编译安装Nginx 官网:http://wiki.nginx.org/Instal ...
- python安装包是出现错误解决
/usr/lib/gcc/x86_64-linux-gnu/4.8/include-fixed/limits.h:168:61: fatal error: limits.h: No such file ...
- rocketmq的线程服务基类
RocketMQ有很多的线程服务,这些服务都继承自抽象类ServiceThread. 这个抽象类可以单独抽出来用到我们其他的项目中来,仅仅需要修改下日志模块: /** * Licensed to th ...
- RocketMQ里的一个获取时间的工具类SystemClock
看rocketmq源码的时候发现他们还给时钟封装里一下. /** * Licensed to the Apache Software Foundation (ASF) under one or mor ...
- 转：关于android webview实践的文章集合
http://blog.csdn.net/jiangqq781931404/article/category/2681765