javascript 实现分享功能

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>