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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jquery获取节点名称
Apr 26 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
微信小程序自动客服功能
Nov 02 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
js中reverse函数的用法详解
2013/12/26 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
mac系统安装Python3初体验
2018/01/02 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
护理实习自我鉴定
2013/12/14 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
工程承包协议书
2014/10/20 职场文书
2015年领班工作总结
2015/04/29 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
校车司机安全责任书
2015/05/11 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
银行培训心得体会范文
2016/01/09 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技