js仿新浪微博消息发布功能


Posted in Javascript onFebruary 17, 2017

本文实例为大家分享了js仿新浪微博消息发布的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿新浪微博消息发布功能</title>
<style>
*{margin: 0; padding: 0;}
#div1{width: 400px; height: 400px; border: 1px solid; margin:10px auto; position: relative;overflow: hidden;}
#ul1 li{border-bottom: 1px #999 dashed; padding: 4px; list-style: none;filter: alpha(opacity:0);
opacity: 0;}
</style>
<script src="js/chuan.js"></script>
</head>
<body>
  <textarea rows="5" cols="30" id="txt1"value=""></textarea>
  <input type="button" id="btn1" value="发布" />
    <div id="div1">
    <ul id="ul1"></ul>
    </div>
<script>
var oUl=document.getElementById('ul1');
var oTxt1=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
var oLi=document.createElement('li');
        oLi.innerHTML=oTxt1.value;
        oTxt1.value='';
        if(oUl.children.length>0)
        {
        oUl.insertBefore(oLi,oUl.children[0]);
        }
        else
        {
        oUl.appendChild(oLi);
        }
        var iHeight=oLi.offsetHeight;
        oLi.style.height=0;
        move(oLi,{height:iHeight},function()
        {
        move(oLi,{opacity:100});
        });
}
</script>
</body>
</html>

chuan,js为之前写的完美运动框架:

function getstyle(obj,name)
  {
if(obj.currentStyle)
{
return obj.currentStyle;
}
else
{
return getComputedStyle(obj,false)[name];
}
  }
      function move(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
 var bBox=true;//假设所有值都已经到了
 for(var strr in json)
 {
 if(strr=='opacity')
 {
  var cur=Math.round(parseFloat(getstyle(obj,strr))*100);
 }
 else
 {
  var cur=parseInt(getstyle(obj,strr));
 }
 var speed=(json[strr]-cur)/10;
 speed=speed>0?Math.ceil(speed):Math.floor(speed);
 
 if(cur!=json[strr])
 bBox=false;
 if(strr=='opacity')
            {
            obj.style.filter='alpha(opacity:'+(cur+speed+')');
            obj.style.opacity=(cur+speed)/100;
            }
 else
 {
 obj.style[strr]=cur+speed+'px';
 }
 }
 if(bBox)
 {
 clearInterval(obj.timer);
 if(fnEnd)fnEnd();
 }
},30);
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
JavaScript中this详解
Sep 01 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
node中的cookie的具体使用
Sep 13 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
TypeScript 内置高级类型编程示例
Sep 23 Javascript
babel基本使用详解
Feb 17 #Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 #Javascript
canvas 实现中国象棋
Feb 17 #Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 #Javascript
js实现横向拖拽导航条功能
Feb 17 #Javascript
js转换对象为xml
Feb 17 #Javascript
EsLint入门学习教程
Feb 17 #Javascript
You might like
PHP 时间日期操作实战
2011/08/26 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
如何执行一个shell程序
2012/11/23 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
女儿满月酒致辞
2015/07/29 职场文书
2016年公司新年寄语
2015/08/17 职场文书
python开发制作好看的时钟效果
2022/05/02 Python