<!doctype html><html><head><meta charset="utf-8"><title> 速度动画--购物车</title><style>body,div,span{ margin:0; padding:0; }#div1{ width:200px; height:200px; background:red; position:relative; left:-200px; top:0px;}#div1 span{ width:20px; height:50px; background:blue; position:absolute; left:200px; top:75px;}</style></head><body> <div id="div1"><span id="share">分享</span></div><script>window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(); } oDiv.onmouseout = function(){ startMove1(); }}var timer = null;function startMove(){ clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function(){ if(oDiv.offsetLeft == 0){ cleraInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft+1+'px'; } },30) };function startMove1(){ clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function(){ if(oDiv.offsetLeft == -200){ cleraInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft-1+'px'; } },30) }</script></body></html>
添加回答
举报
0/150
提交
取消