<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是這樣的,動圖看不到鼠標,我鼠標一上去時,他會出現(xiàn)的不是這么流暢,而是一卡一卡
做了一個速度動畫。但是有一點BUG,半天想不到解決
Sprash
2016-04-12 23:29:29