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);

};

js仿新浪微博消息发布功能相关推荐

html如何设置跳转到百度页面,js仿百度切换皮肤功能（html+css）
js仿百度切换皮肤效果:(换肤出来一个div,选择你想要的图片,作为网页背景,保存) 要点:cookie保存状态 html代码: 换肤热门收起 css代码: * { margin:0px; pad ...
JavaScript仿新浪微博搜索框功能
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title> ...
新浪微博发布文章html,JS实现仿新浪微博发布内容为空时提示功能代码
本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本 ...
html仿qq最小化怎么实现,JS仿QQ好友列表展开、收缩功能(第一篇)
JS仿QQ好友列表展开.收缩功能(第一篇) 发布时间:2020-10-17 14:20:03 来源:脚本之家阅读:96 作者:erdouzhang 效果图如下所示: html: 我的好友张三李四 ...
【原生JS】仿新浪微博名片弹框
[原生JS]仿新浪微博名片弹框博客已经搬家地址:http://cm2009.sinaapp.com/ 第一次用原生JS写小功能,有很多不足的地方,例如事件绑定没有使用事件委托功能,而是直接用零级D ...
仿比心一对一直播软件源码开发，消息通知功能的实现
在仿比心一对一直播软件源码中,消息功能起着非常重要的作用,非实时性的社交都可以通过消息功能来实现,在即时消息模块有两个基本功能就是发送消息和接收消息.我们定义如下通信指令来实现这两个功能: Push ...
仿新浪微博滚动，无文字渐显功能
又一款仿新浪微博的文字滚动功能,去掉了滚动开始时候的文字渐显效果,似乎更明淅了,又一种风格的新浪微博大厅文字滚动,要的就复制代码吧. <!DOCTYPE HTML> <html la ...
仿新浪微博的ListView下拉更新功能
由于最近做的项目中也用到了这个功能,今天刚好实现了下,就趁现在有时间写篇博客分享下.在做的时候也参考了下别人的代码,毕竟站在巨人的肩膀上才会是自己更加强大.哈哈!先看看新浪的下拉更新是什么样的吧! O ...
JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

js仿新浪微博消息发布功能

js仿新浪微博消息发布功能相关推荐

最新文章

热门文章