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 相关文章推荐
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
vue axios 简单封装以及思考
Oct 09 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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图片处理之图片背景、画布操作
2014/11/19 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python导入时小括号大作用
2017/01/10 Python
详解Python中类的定义与使用
2017/04/11 Python
Python logging设置和logger解析
2019/08/28 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
小学数学教学反思
2014/02/02 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL