<!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:?0;
????????????}
????????????#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>
????</body>
</html>
2017-07-12
var oDiv = $('.div1')[0],
? ? timer = null;
? ? oDiv.onmouseover = function(){
? ? startMove(0);
? ? }
? ? oDiv.onmouseout = function(){
? ? startMove(-200);
? ? }
? ? function startMove(iTagget){
? ? clearInterval(timer);
? ? timer =setInterval(function(){
? ? var speed =(iTagget-oDiv.offsetLeft)/20;
? ? speed = speed>0? Math.ceil(speed):Math.floor(speed);
? ? if(oDiv.offsetLeft == iTagget){
? ? clearInterval(timer);
? ? }else{
? ? oDiv.style.left = oDiv.offsetLeft + speed + 'px';
? ? }
? ? },1)
? ? }