您的位置：首页 > 其它

完美运动框架以及微博案例

2018-03-21 11:30 381 查看
html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>完美运动框架</title>
<script src="move2.js"></script>
<style>
#div1{width: 100px;height: 100px;background: red; filter:alpha(opacity:30);opacity: 0.3;}
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(oDiv,{width:300,height:300,opacity:100});
}
oDiv.onmouseout=function(){
startMove(oDiv,{width:100,height:100,opacity:30});
}
}
</script>
</head>
<body>
<div id='div1'>
</div>
</body>
</html>


js

function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}

function startMove(obj,json,fn){
clearInterval(obj.time);
obj.time=setInterval(function(){
//当有没运动到的，就不关闭定时器，假设所有的值都到了
var bStop = true;
//使用json，是为了使多个属性可以同时运动，方法就是遍历json,使其多次执行其中的代码
//此时也不能够使用target,而是等于json中设定的值
//当有一个值到达目标点时就会清除定时器，此时就会使运动停止，
//而其他的运动还没有到达指定位置，此时就是出现的bug
for(var attr in json){
var curr=0;
if(attr=='opacity'){
curr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
curr = parseInt(getStyle(obj,attr));
}

var speed = (json[attr]-curr)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(curr!=json[attr]){
bStop=false;
}

if(attr=='opacity'){
//记得加括号
obj.style.filter = 'alpha(opacity:'+(curr+speed)+')';
obj.style.opacity = (curr+speed)/100;
}else{
obj.style[attr] = curr+speed+'px';
}

}
if(bStop){
clearInterval(obj.time);
if(fn)fn();
}

},30);

}


微博运动案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博运动案例</title>
<style>
*{margin: 0;padding: 0;}
#oUl{width: 300px;height: 500px;border: 1px solid brown;margin:20px auto;}
#oUl li{border-bottom: 1px dashed brown;padding: 4px;
list-style-type: none; filter:alpha(opacity:0);opacity: 0;}
</style>
<script type="text/javascript" src="move2.js" ></script>
<script>
window.onload = function(){
var oInput = document.getElementById('input1');
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('oUl');
var oLi1 = oUl.getElementsByTagName('li');

oBtn.onclick=function(){
var oLi = document.createElement('li');
oLi.innerHTML=oInput.value;
oInput.value='';
if(oLi1.length>0){
oUl.insertBefore(oLi,oLi1[0]);
}else{
oUl.appendChild(oLi);
}
//运动
var iHeight = oLi.offsetHeight;
oLi.style.height=0;
startMove(oLi,{height:iHeight,opacity:100});
}

}

</script>
</head>
<body>
<textarea id='input1' rows="4" cols="30"></textarea>
<button id='btn'>发布</button>
<ul id='oUl'>

</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航