模仿qq空间Demo
先看截图：
又兴趣可以下下来看看/Files/MasterHeng/MoveTop.zip
js:
View Code 
1 function util() {
2 this.scrTop = 0;
3 this.speed = 0;
4 this.id = 0;
5
6 this.tab = null;
7 this.tabSpeed = 0;
8 this.idTab = 0;
9 this.height = 194;
10
11 this.outbtn = 0;
12 this.init();
13 }
14 util.prototype = {
15 init: function () {
16 var _this = this;
17 this.tab = document.getElementById("tips-tab");
18
19 this.addHandler(document.getElementById("tips-top"), "click", function () {
20 _this.id = setInterval(function () { _this.move(); }, 30);
21 });
22 this.addHandler(document.getElementById("tips-hot"), "click", function () {
23 _this.idTab = setInterval(function () { _this.popup(); }, 30);
24 });
25 this.addHandler(document.getElementById("tips-out"), "click", function () {
26 _this.outbtn = setInterval(function () { _this.popout(); }, 30);
27 });
28 },
29 move: function () {
30 this.scrTop = document.documentElement.scrollTop || document.body.scrollTop;
31 this.speed = Math.ceil(this.scrTop / 6);
32 if (this.scrTop == 0) {
33 clearInterval(this.id);
34 }
35 else {
36 document.documentElement.scrollTop = document.body.scrollTop = this.scrTop - this.speed;
37 }
38 },
39 popup: function () {
40 var popbottom = this.tab.offsetHeight;
41
42 this.tabSpeed = Math.ceil((this.height - popbottom) / 8);
43
44 if (popbottom == this.height) {
45 clearInterval(this.idTab);
46 }
47 else {
48 this.tab.style.height = popbottom + this.tabSpeed + "px";
49 }
50 },
51 popout: function () {
52 var popbottom = this.tab.offsetHeight;
53
54 this.tabSpeed = Math.ceil(popbottom / 8);
55
56 if (popbottom == 0) {
57 clearInterval(this.outbtn);
58 }
59 else {
60 this.tab.style.height = popbottom - this.tabSpeed + "px";
61 }
62 },
63
64 getElementTop: function (element) {
65 var actualTop = element.offsetTop;
66 var current = element.offsetParent;
67
68 while (current != null) {
69 actualTop += current.offsetTop;
70 current = current.offsetParent;
71 }
72 return actualTop;
73 },
74 getEvent: function (event) {
75 return event ? event : window.event;
76 },
77 getTarget: function (event) {
78 return event.target || event.srcElement;
79 },
80 addHandler: function (element, type, handler) {
81 if (element.addEventListener) {
82 element.addEventListener(type, handler, false);
83 }
84 else if (element.attachEvent) {
85 element.attachEvent("on" + type, handler);
86 }
87 else {
88 element["on" + type] = handler;
89 }
90 },
91 removeHandler: function (element, type, handler) {
92 if (element.removeEventListener) {
93 element.removeEventListener(type, handler, false);
94 }
95 else if (element.detachEvent) {
96 element.detachEvent("on" + type, handler);
97 }
98 else {
99 element["on" + type] = null;
100 }
101 }
102 }
2 this.scrTop = 0;
3 this.speed = 0;
4 this.id = 0;
5
6 this.tab = null;
7 this.tabSpeed = 0;
8 this.idTab = 0;
9 this.height = 194;
10
11 this.outbtn = 0;
12 this.init();
13 }
14 util.prototype = {
15 init: function () {
16 var _this = this;
17 this.tab = document.getElementById("tips-tab");
18
19 this.addHandler(document.getElementById("tips-top"), "click", function () {
20 _this.id = setInterval(function () { _this.move(); }, 30);
21 });
22 this.addHandler(document.getElementById("tips-hot"), "click", function () {
23 _this.idTab = setInterval(function () { _this.popup(); }, 30);
24 });
25 this.addHandler(document.getElementById("tips-out"), "click", function () {
26 _this.outbtn = setInterval(function () { _this.popout(); }, 30);
27 });
28 },
29 move: function () {
30 this.scrTop = document.documentElement.scrollTop || document.body.scrollTop;
31 this.speed = Math.ceil(this.scrTop / 6);
32 if (this.scrTop == 0) {
33 clearInterval(this.id);
34 }
35 else {
36 document.documentElement.scrollTop = document.body.scrollTop = this.scrTop - this.speed;
37 }
38 },
39 popup: function () {
40 var popbottom = this.tab.offsetHeight;
41
42 this.tabSpeed = Math.ceil((this.height - popbottom) / 8);
43
44 if (popbottom == this.height) {
45 clearInterval(this.idTab);
46 }
47 else {
48 this.tab.style.height = popbottom + this.tabSpeed + "px";
49 }
50 },
51 popout: function () {
52 var popbottom = this.tab.offsetHeight;
53
54 this.tabSpeed = Math.ceil(popbottom / 8);
55
56 if (popbottom == 0) {
57 clearInterval(this.outbtn);
58 }
59 else {
60 this.tab.style.height = popbottom - this.tabSpeed + "px";
61 }
62 },
63
64 getElementTop: function (element) {
65 var actualTop = element.offsetTop;
66 var current = element.offsetParent;
67
68 while (current != null) {
69 actualTop += current.offsetTop;
70 current = current.offsetParent;
71 }
72 return actualTop;
73 },
74 getEvent: function (event) {
75 return event ? event : window.event;
76 },
77 getTarget: function (event) {
78 return event.target || event.srcElement;
79 },
80 addHandler: function (element, type, handler) {
81 if (element.addEventListener) {
82 element.addEventListener(type, handler, false);
83 }
84 else if (element.attachEvent) {
85 element.attachEvent("on" + type, handler);
86 }
87 else {
88 element["on" + type] = handler;
89 }
90 },
91 removeHandler: function (element, type, handler) {
92 if (element.removeEventListener) {
93 element.removeEventListener(type, handler, false);
94 }
95 else if (element.detachEvent) {
96 element.detachEvent("on" + type, handler);
97 }
98 else {
99 element["on" + type] = null;
100 }
101 }
102 }
html：
View Code 1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title></title>
6 <style type="text/css">
7 #tips-box{ position:fixed; bottom:0; right:50px; width:100px; height:35px;}
8 #tips-top{ float:left; width:50px; height:35px; background:url('bg.png') no-repeat -147px 0; font-size:12px; cursor:pointer; text-indent:-9999px;}
9 #tips-hot{ float:left; width:50px; height:35px; background:url('bg.png') no-repeat -197px 0; font-size:12px; cursor:pointer; text-indent:-9999px;}
10 #tips-top:hover{ background:url('bg.png') no-repeat -147px -35px; }
11 #tips-hot:hover{ background:url('bg.png') no-repeat -197px -35px; }
12
13 #tips-tab{ position:fixed; bottom:0; right:25px; width:321px; height:0; background:url("tab.png") no-repeat 0 0;}
14 #tips-out{ float:right; width:9px; height:8px; margin:7px 7px 0 0; background:url('exit.png') no-repeat 0 0; cursor:pointer;}
15 #tips-out:hover{ background:url('exit.png') no-repeat 0 -10px;}
16 </style>
17 </head>
18 <body>
19 <div id="tips-box">
20 <a href="javascript:void(0);" id="tips-top">顶部</a>
21 <a href="javascript:void(0);" id="tips-hot">热点</a>
22 </div>
23
24 <div id="tips-tab">
25 <div id="tips-out"></div>
26 </div>
27
28 <div style="width:900px; height:3000px; margin:0 auto; background-color:#F5F5F5;">
29 </div>
30
31 <script src="util.js" type="text/javascript"></script>
32 <script type="text/javascript">
33 var obj = new util();
34 </script>
35 </body>
36 </html>
2
3 <html>
4 <head>
5 <title></title>
6 <style type="text/css">
7 #tips-box{ position:fixed; bottom:0; right:50px; width:100px; height:35px;}
8 #tips-top{ float:left; width:50px; height:35px; background:url('bg.png') no-repeat -147px 0; font-size:12px; cursor:pointer; text-indent:-9999px;}
9 #tips-hot{ float:left; width:50px; height:35px; background:url('bg.png') no-repeat -197px 0; font-size:12px; cursor:pointer; text-indent:-9999px;}
10 #tips-top:hover{ background:url('bg.png') no-repeat -147px -35px; }
11 #tips-hot:hover{ background:url('bg.png') no-repeat -197px -35px; }
12
13 #tips-tab{ position:fixed; bottom:0; right:25px; width:321px; height:0; background:url("tab.png") no-repeat 0 0;}
14 #tips-out{ float:right; width:9px; height:8px; margin:7px 7px 0 0; background:url('exit.png') no-repeat 0 0; cursor:pointer;}
15 #tips-out:hover{ background:url('exit.png') no-repeat 0 -10px;}
16 </style>
17 </head>
18 <body>
19 <div id="tips-box">
20 <a href="javascript:void(0);" id="tips-top">顶部</a>
21 <a href="javascript:void(0);" id="tips-hot">热点</a>
22 </div>
23
24 <div id="tips-tab">
25 <div id="tips-out"></div>
26 </div>
27
28 <div style="width:900px; height:3000px; margin:0 auto; background-color:#F5F5F5;">
29 </div>
30
31 <script src="util.js" type="text/javascript"></script>
32 <script type="text/javascript">
33 var obj = new util();
34 </script>
35 </body>
36 </html>
浙公网安备 33010602011771号