过了几天再换回来看看动态效果部分,
<!doctype html>
<html lang="zh"><head>
<meta charset="UTF-8">
<style type="text/css">
#div1{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;}
#div1 span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var odiv=document.getElementById('div1');
odiv.οnmοuseοver=function(){
startmove();
}
}
var timer=null;
function startmove(){
clearInterval(timer);
var odiv=document.getElementById('div1');
timer=setInterval(function(){
if(odiv.offsetLeft==0){
clearInterval(timer);}
odiv.style.left=odiv.offsetLeft+10+'px';
},30)
}
</script>
</head>
<body>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
水平向右移动效果