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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
jQuery使用手册之二 DOM操作
Mar 24 Javascript
JS加ASP二级域名转向的代码
May 17 Javascript
js left,right,mid函数
Jun 10 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
老生常谈js数据类型
2017/08/03 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
驾驶员管理制度范本
2015/08/06 职场文书