链式运动实例运动框架应用微博

最新推荐文章于 2020-11-04 10:26:44 发布

都市桃源

最新推荐文章于 2020-11-04 10:26:44 发布

阅读量893

点赞数

分类专栏： web js web 文章标签： javascript js web开发实例源代码

本文链接：https://blog.csdn.net/do_bset_yourself/article/details/45270299

版权

web 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

web js

6 篇文章 0 订阅

订阅专栏

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>微博效果</title>
<style>
*{
margin:0;
padding:0;
}
#txt{
color:#090;
}
#oul{
width:700px;
height:500px;
display:block;
border:1px solid #000;
position:relative;
left:700px;
overflow:hidden;
}
#oul li{
color:#9FC;
list-style:none;
width:700px;
border-bottom:#000 1px dashed;
opacity:0;
overflow:hidden;
}
</style>
<script src="完美运动框架.js" type="text/javascript"></script>
<script>
window.οnlοad=function(){
var Txt=document.getElementById('txt');
var oBt=document.getElementById('obt');
var oUl=document.getElementById('oul');
oBt.οnclick=function(){
var oLi=document.createElement('li');
oLi.innerHTML=Txt.value;
Txt.value='';
oUl.insertBefore(oLi,oUl.childNodes[0]);
var target=oLi.offsetHeight;
oLi.style.height=0;
startMove(oLi,{height:target},function(){startMove(oLi,{opacity:100});
})
}
}
</script>
</head>

<body>
<textarea rows="10" cols="80" id="txt"></textarea><input type="button" value="发布" id="obt" />
<ul id="oul">
</ul>
</body>
</html>

//老一套运动框架

// JavaScript Document
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,json,fun){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bstop=true;
for(var attr in json){
var beginning=0;
if(attr=='opacity'){
beginning=Math.round(parseFloat(getStyle(obj, attr))*100);
}else{
beginning=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-beginning)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(beginning!=json[attr])
bstop=false;
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(beginning+speed)+')';
obj.style.opacity=(beginning+speed)/100;
}
else
{
obj.style[attr]=beginning+speed+'px';
}

}
if(bstop){
clearInterval(obj.timer);
if(fun)fun();
}

},30)

}