1、面向过程分享
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 ul,li{ 13 list-style: none; 14 } 15 16 .share { 17 position: absolute; 18 300px; 19 height: 200px; 20 21 left: -270px; 22 } 23 24 .share span{ 25 padding-top: 70px; 26 27 30px; 28 height: 130px; 29 30 display: block; 31 float: left; 32 33 border-radius:0 10px 10px 0; 34 35 background-color: pink; 36 color: #fff; 37 text-align: center; 38 } 39 40 .sharecont{ 41 270px; 42 height: 200px; 43 44 float: left; 45 46 background: grey; 47 } 48 49 </style> 50 </head> 51 <body> 52 53 <div class="share" id="share"> 54 <div class="sharecont"></div> 55 <span id="share">分享到:</span> 56 </div> 57 <script> 58 /** 59 * 练习javascript中运动的概念 60 * javascript 要实现运动运动设计到的两个地方: 61 * 1、div 必须要设置为position: absolute 62 * 2、使用定时器来完成 63 * 3、以后判断条件尽量用===的形式来判断到达终点 64 */ 65 window.onload = function () { 66 var share = document.getElementById('share'); 67 var timer = null; 68 69 function startMove (iTarget) { 70 clearInterval(timer); 71 var speed = 0; 72 timer = setInterval(function(){ 73 if( share.offsetLeft < iTarget ){ 74 speed = 10; 75 }else{ 76 speed = -10; 77 } 78 79 if( share.offsetLeft === iTarget ){ 80 clearInterval(timer); 81 }else{ 82 share.style.left = share.offsetLeft + speed + "px"; 83 } 84 },30); 85 } 86 87 share.onmouseover = function () { 88 startMove(0); 89 }; 90 share.onmouseout = function () { 91 startMove(-270); 92 }; 93 }; 94 </script> 95 </body> 96 97 </html>
2、使用面向对象改写以上程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 ul,li{ 13 list-style: none; 14 } 15 16 .share { 17 position: absolute; 18 300px; 19 height: 200px; 20 21 left: -270px; 22 } 23 24 .share span{ 25 padding-top: 70px; 26 27 30px; 28 height: 130px; 29 30 display: block; 31 float: left; 32 33 border-radius:0 10px 10px 0; 34 35 background-color: #6ed8e5; 36 color: #fff; 37 text-align: center; 38 } 39 40 .sogoushare { 41 top: 300px; 42 } 43 44 .sogoushare span{ 45 background-color: #3acdb0; 46 } 47 48 .sharecont{ 49 270px; 50 height: 200px; 51 52 float: left; 53 54 background: grey; 55 } 56 57 </style> 58 </head> 59 <body> 60 61 <div class="share" id="baidushare"> 62 <div class="sharecont"></div> 63 <span>分享到</span> 64 </div> 65 66 <div class="share sogoushare" id="sogoushare"> 67 <div class="sharecont"></div> 68 <span>分享到</span> 69 </div> 70 71 <script> 72 73 /** 74 * 练习javascript中运动完成面向对象的分享功能 75 * overItarget 传入移入的到达目标值 76 * outItarget 传入移出的目标值 77 */ 78 79 function Share (id, overItarget, outItarget) { 80 this.share = document.getElementById(id); 81 this.timer = null; 82 this.speed = 0; 83 var that = this; 84 85 this.share.onmouseover = function () { 86 that.startMove(overItarget); 87 }; 88 89 this.share.onmouseout = function () { 90 that.startMove(outItarget); 91 }; 92 } 93 94 Share.prototype.startMove = function(iTarget) { 95 clearInterval(this.timer); 96 97 var that = this; 98 this.timer = setInterval(function(){ 99 100 if( that.share.offsetLeft < iTarget ){ 101 this.speed = 10; 102 }else{ 103 this.speed = -10; 104 } 105 106 107 if( that.share.offsetLeft === iTarget ){ 108 clearInterval(this.timer); 109 }else{ 110 that.share.style.left = that.share.offsetLeft + this.speed + "px"; 111 } 112 },30); 113 }; 114 115 116 117 118 window.onload = function () { 119 120 var baiduShare = new Share("baidushare",0,-270); 121 var sogouShare = new Share("sogoushare",0,-270); 122 123 }; 124 </script> 125 </body>