放源碼（速度動畫）
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title></title>
??? <style type="text/css">
??????? *{
??????????? margin:0;
??????????? padding:0;
??????? }
.frameworks{
position:fixed;
??? top:30%;
}
?????? .frameworks span{
?????????? width:20px;
??????????? height:50px;
??????????? position:absolute;
??????????? border:1px #8e8e8e solid;
??????????? color:#fff;
??????????? background-color: #0088bb;
??????????? left: 200px;
??????????? top: 75px;
??????? }
?????? .content{
??????????? width:200px;
??????????? height:200px;
??????????? background-color: #8e8e8e;
??????????? position:relative;
??????????? left:-200px;
??????? }
??? </style>
</head>
<body>
<div>
??? <div id="div1">
??? <span>分享</span>
??? </div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
??? var odiv = document.getElementById("div1");
??? odiv.onmouseover=function(){
??????? startMove(0);
??? };
??? odiv.onmouseout=function(){
??????? startMove(-200);
??? };
};
var timer=null;
??? function startMove(iTarget){
??????? clearInterval(timer);
??????? var odiv = document.getElementById("div1");
??????????? timer = setInterval(function () {
??????????????? if(odiv.offsetLeft>iTarget){
??????????????????? speed = -10;
??????????????? }else{
??????????????????? speed = 10;
??????????????? }
??????????????? if(odiv.offsetLeft == iTarget){
??????????????????? clearInterval(timer)
??????????????? }else {
??????????????????? odiv.style.left = odiv.offsetLeft + speed + 'px'
??????????????? }
??????????? }, 20)
??? }
</script>
</html>
2015-12-24
1、CSS樣式中冗余代碼好多，差評；
2、JS對象的命名沒有規(guī)則章法，差評。