做了一个速度动画。但是有一点BUG，半天想不到解决
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.hide{
width: 200px;
height:200px;
background-color: red;
float: left;
}
.showme{
float: left;
width: 50px;
height: 50px;
background-color: green;
}
.c1{
overflow: hidden;
width: 250px;
margin-left: -200px;
height: 200px;
}
</style>
</head>
<body>
<div id="showme" class="c1">
<div class="hide" id="hide"></div>
<div class="showme"></div>
</div>
<script type="text/javascript">
var showme=document.getElementById("showme")
var timer=null;
showme.onmouseover=a1;
function a1(){
clearInterval(timer);
timer=setInterval(a2,50);
}
function a2(){
if(showme.offsetLeft<0){
showme.style.marginLeft=showme.offsetLeft+10;
}
else{
clearInterval(timer);
}
}
showme.onmouseout=a3;
function a3(){
clearInterval(timer);
showme.style.marginLeft=-200+"px";
}
</script>
</body>
</html>
BUG是这样的，动图看不到鼠标，我鼠标一上去时，他会出现的不是这么流畅，而是一卡一卡
Sprash2回答
-
林方清i
数值10太大，改成1吧。。。 -
卖火柴的小舒
数值10太大。。。。。
随时随地看视频慕课网APP
Html/CSS
Html5
JavaScript