多物体运动

最新推荐文章于 2023-04-11 00:42:52 发布

deeerforest

最新推荐文章于 2023-04-11 00:42:52 发布

阅读量270

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/deeerforest/article/details/51565095

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>
<title>untitled</title>
<meta charset="utf-8">
<style>
*{margin:0;padding:0;}
ul li{list-style:none;}
ul li{
width:200px;
height:100px;
background-color:#CD3278;
margin-bottom:20px;
}
</style>
<script>
window.οnlοad=function(){

var ali=document.getElementsByTagName('li');
for(var i=0;i<ali.length;i++){
ali[i].timer=null;
ali[i].οnmοuseοver=function(){
move(this,400);
}
ali[i].οnmοuseοut=function(){
move(this,200);
}
}
}

function move(obj,target){

clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(target-obj.offsetWidth)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==target){
clearInterval(timer);
}
else{
obj.style.width=obj.offsetWidth+speed+'px';
}
},20)
}
</script>

</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>

</html>

给块添加border后，效果将不能实现，此时应封装函数来获取样式，如下所示：

<!DOCTYPE html>
<head>
<title>untitled</title>
<meta charset="utf-8">
<style>
*{margin:0;padding:0;}
ul li{list-style:none;}
ul li{
width:200px;
height:100px;
background-color:#CD3278;
margin-bottom:20px;
}
</style>
<script>
window.οnlοad=function(){

var ali=document.getElementsByTagName('li');
for(var i=0;i<ali.length;i++){
ali[i].timer=null;
ali[i].οnmοuseοver=function(){
move(this,400);
}
ali[i].οnmοuseοut=function(){
move(this,200);
}
}
}

function move(obj,target){

clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(target-parseInt(getStyle(obj,'width')))/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(parseInt(getStyle(obj,'width'))==target){
clearInterval(timer);
}
else{
obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';
}
},20)
}
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj, false)[attr];
}
}
</script>

</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

deeerforest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多物体运动

untitled *{margin:0;padding:0;}ul li{list-style:none;}ul li{width:200px;height:100px;background-color:#CD3278;margin-bottom:20px;} window.onload=function(){var ali=
复制链接

扫一扫

专栏目录