点滴积累【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 [ ...
随机推荐
- 通过LoadBalancerClient获取所有服务列表的IP
说明:LoadBalanced采用轮训的方式请求服务提供者,但是如果针对某些业务需要精确到某个服务提供者或者遍历所有的服务提供者,那么可以通过LoadBalancerClient去获得. 参考: ht ...
- mysql设置远程访问密码
mysql -u root -p Aaa111222 grant all privileges on *.* to root@'%' identified by 'aaa111222; Quit ln ...
- 如何释放 DB_RECOVERY_FILE_DEST_SIZE
转自原文 如何釋放 DB_RECOVERY_FILE_DEST_SIZE,有删减 oracle默認安裝之後,如何沒有手動設置歸檔路徑(alter system set log_archive_dest ...
- 【转】Points To Line
原文地址 Python+Arcpy操作Points(.shp)转换至Polyline(.shp),仔细研读Points To Line (Data Management)说明,参数说明如下: Inpu ...
- Android学习进阶路线导航线路(Android源码分享)
转 ...
- java/eclipse/myeclipse建立.properties文件的方法
相比较来说,Java程序的编写相对简单很多,多数文件都可以通过编写文本文件生成! 对于不用IDE的java程序来讲,只需要右键新建>文本文件,建立好以后写好代码,另存为xx.prop ...
- Clone()方法C#
class DrawBase:System.Object , ICloneable { public string name = "jmj"; public DrawBase() ...
- Spark学习视频整合
1.<Scala深入浅出实战经典>http://pan.baidu.com/s/1pJnAUr5 2.<Spark纯实战公益大讲坛>http://pan.baidu.com/s ...
- 流畅的python第十二章继承的优缺点学习记录
子类化内置类型的缺点 多重集成和方法解析顺序 tkinter
- 更改＂xxxx＂ 的权限: 不允许的操作
[摘要:做为root用户,用chmod为何改没有了文件权限 以ROOT用户上岸,当用chmod改文件权限时,体系表现无权变动,为何 文件名是:aa chmod 777 aa chmod: changi ...