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 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
canvas实现图像放大镜
Feb 06 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
JavaScript伪数组用法实例分析
Dec 22 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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
Smarty模板快速入门
2007/01/04 PHP
实用函数2
2007/11/08 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
vue.js指令v-model实现方法
2016/12/05 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
jQuery动态产生select option下拉列表
2017/03/15 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
js实现弹窗效果
2020/08/09 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python文本相似性计算之编辑距离详解
2016/11/28 Python
详解django三种文件下载方式
2018/04/06 Python
python实现画出e指数函数的图像
2019/11/21 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
大学毕业生个人自荐信范文
2014/01/08 职场文书
员工拓展培训方案
2014/02/15 职场文书
学员自我鉴定
2014/03/19 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
检讨书格式
2015/01/23 职场文书
债务纠纷起诉书
2015/05/20 职场文书
单身证明范本
2015/06/15 职场文书
安全主题班会教案
2015/08/12 职场文书
创业计划书之面包店
2019/09/17 职场文书
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL