js仿新浪微博消息发布功能
更新时间：2017年02月17日 16:30:03 作者：jingtian678
这篇文章主要为大家详细介绍了js仿新浪微博消息发布功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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);
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇封装运动框架实战左右与上下滑动的焦点轮播图(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细介绍了微信小程序实现九宫格翻牌动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
JavaScript使用pop方法移除数组最后一个元素用法实例
这篇文章主要介绍了JavaScript使用pop方法移除数组最后一个元素,实例分析了javascript中pop方法的使用技巧,需要的朋友可以参考下2015-04-04
JavaScript窗口功能指南之在窗口中书写内容...2006-07-07
这篇文章主要为大家详细介绍了微信小程序实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
ES6中为我们提供了很多好用的新特性,其中包括let,箭头函数以及扩展运算符…等，以下就是总结的常用基础知识2019-02-02
这篇文章主要为大家介绍了js 实现picker 选择器示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家详细介绍了JS轮播图实现简单代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
Javascript ES6中对象类型Sets的介绍与使用详解
这篇文章主要给大家介绍了关于Javascript ES6中Sets的介绍与使用的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
下面的原理是利用时间差的原理实现脚本的延迟执行，是个思路，需要的朋友可以参考下。2010-03-03
最新评论