<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
????????*{
????????????margin:?0;
????????????padding:?0;
????????}
????????#box{
????????????width:?200px;
????????????height:200px;
????????????background-color:?#abb88e;
????????????position:?relative;
????????????left:-200px;
????????}
????????#share{
????????????width:50px;
????????????height:100px;
????????????background-color:?#69c;
????????????position:?absolute;
????????????right:?-50px;
????????????top:50px;
????????????font-size:25px;
????????????line-height:50px;
????????????text-align:?center;
????????}
????</style>
????<script>
????????window.onload?=?function(){
????????????var?oDiv?=?document.getElementById('box');
????????????oDiv.onmouseover?=?function(){
????????????????startMove(10,0);
????????????}
????????????oDiv.onmouseout?=?function(){
????????????????startMove(-10,-200);
????????????}
????????}
????????var?timer?=?null;
????????function?startMove(speed,iTarget){
????????????clearInterval(timer);
????????????var?oDiv?=?document.getElementById('box');
????????????setInterval(function(){
????????????????if?(oDiv.offsetLeft?==?iTarget){
????????????????????clearInterval(timer);
????????????????}else?{
????????????????????oDiv.style.left?=?oDiv.offsetLeft+speed+'px';
????????????????}
????????????},30)
????????}
????</script>
</head>
<body>
????<div?id="box">
????????<div?id="share">分<br>享</div>
????</div>
</body>
</html>
鼠標移出時 抖動
dog_195837
2016-09-08 09:54:07