模仿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 }

 

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 >

转载于:https://www.cnblogs.com/MasterHeng/archive/2011/11/29/2267731.html