码迷,mamicode.com
首页 > 其他好文 > 详细

div界面浮动插件

时间:2016-05-16 10:45:03      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

  1 <title>JS浮动广告</title> 
  2 <style type="text/css"> 
  3 img{border:0;} 
  4 </style> 
  5 <SCRIPT type=text/javascript> 
  6 function addEvent(obj,evtType,func,cap){ 
  7     cap=cap||false; 
  8     if(obj.addEventListener){ 
  9         obj.addEventListener(evtType,func,cap); 
 10         return true; 
 11     }else if(obj.attachEvent){ 
 12         if(cap){ 
 13             obj.setCapture(); 
 14             return true; 
 15         }else{ 
 16             return obj.attachEvent("on" + evtType,func); 
 17         } 
 18     }else{ 
 19     return false; 
 20     } 
 21 } 
 22 function getPageScroll(){ 
 23     var xScroll,yScroll; 
 24     if (self.pageXOffset) { 
 25         xScroll = self.pageXOffset; 
 26     } else if (document.documentElement && document.documentElement.scrollLeft){ 
 27         xScroll = document.documentElement.scrollLeft; 
 28     } else if (document.body) { 
 29         xScroll = document.body.scrollLeft; 
 30     } 
 31     if (self.pageYOffset) { 
 32         yScroll = self.pageYOffset; 
 33     } else if (document.documentElement && document.documentElement.scrollTop){ 
 34         yScroll = document.documentElement.scrollTop; 
 35     } else if (document.body) { 
 36         yScroll = document.body.scrollTop; 
 37     } 
 38     arrayPageScroll = new Array(xScroll,yScroll); 
 39     return arrayPageScroll; 
 40 } 
 41 function GetPageSize(){ 
 42     var xScroll, yScroll; 
 43     if (window.innerHeight && window.scrollMaxY) { 
 44         xScroll = document.body.scrollWidth; 
 45         yScroll = window.innerHeight + window.scrollMaxY; 
 46     } else if (document.body.scrollHeight > document.body.offsetHeight){ 
 47         xScroll = document.body.scrollWidth; 
 48         yScroll = document.body.scrollHeight; 
 49     } else { 
 50         xScroll = document.body.offsetWidth; 
 51         yScroll = document.body.offsetHeight; 
 52     } 
 53     var windowWidth, windowHeight; 
 54     if (self.innerHeight) { 
 55         windowWidth = self.innerWidth; 
 56         windowHeight = self.innerHeight; 
 57     } else if (document.documentElement && document.documentElement.clientHeight) { 
 58         windowWidth = document.documentElement.clientWidth; 
 59         windowHeight = document.documentElement.clientHeight; 
 60     } else if (document.body) { 
 61         windowWidth = document.body.clientWidth; 
 62         windowHeight = document.body.clientHeight; 
 63     } 
 64     if(yScroll < windowHeight){ 
 65         pageHeight = windowHeight; 
 66     } else { 
 67         pageHeight = yScroll; 
 68     } 
 69     if(xScroll < windowWidth){ 
 70         pageWidth = windowWidth; 
 71     } else { 
 72         pageWidth = xScroll; 
 73     } 
 74     arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
 75     return arrayPageSize; 
 76 } 
 77  
 78 var AdMoveConfig=new Object(); 
 79 AdMoveConfig.IsInitialized=false; 
 80 AdMoveConfig.ScrollX=0; 
 81 AdMoveConfig.ScrollY=0; 
 82 AdMoveConfig.MoveWidth=0; 
 83 AdMoveConfig.MoveHeight=0; 
 84 AdMoveConfig.Resize=function(){ 
 85     var winsize=GetPageSize(); 
 86     AdMoveConfig.MoveWidth=winsize[2]; 
 87     AdMoveConfig.MoveHeight=winsize[3]; 
 88     AdMoveConfig.Scroll(); 
 89 } 
 90 AdMoveConfig.Scroll=function(){ 
 91     var winscroll=getPageScroll(); 
 92     AdMoveConfig.ScrollX=winscroll[0]; 
 93     AdMoveConfig.ScrollY=winscroll[1]; 
 94 } 
 95 addEvent(window,"resize",AdMoveConfig.Resize); 
 96 addEvent(window,"scroll",AdMoveConfig.Scroll); 
 97 function AdMove(id){ 
 98     if(!AdMoveConfig.IsInitialized){ 
 99         AdMoveConfig.Resize(); 
100         AdMoveConfig.IsInitialized=true; 
101     } 
102     var obj=document.getElementById(id); 
103     obj.style.position="absolute"; 
104     var W=AdMoveConfig.MoveWidth-obj.offsetWidth; 
105     var H=AdMoveConfig.MoveHeight-obj.offsetHeight; 
106     var x = W*Math.random(),y = H*Math.random(); 
107     var rad=(Math.random()+1)*Math.PI/6; 
108     var kx=Math.sin(rad),ky=Math.cos(rad); 
109     var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1); 
110     var step = 1; 
111     var interval; 
112     this.SetLocation=function(vx,vy){x=vx;y=vy;} 
113     this.SetDirection=function(vx,vy){dirx=vx;diry=vy;} 
114     obj.CustomMethod=function(){ 
115         obj.style.left = (x + AdMoveConfig.ScrollX) + "px"; 
116         obj.style.top = (y + AdMoveConfig.ScrollY) + "px"; 
117         rad=(Math.random()+1)*Math.PI/6; 
118         W=AdMoveConfig.MoveWidth-obj.offsetWidth; 
119         H=AdMoveConfig.MoveHeight-obj.offsetHeight; 
120         x = x + step*kx*dirx; 
121         if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);} 
122         if (x > W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);} 
123         y = y + step*ky*diry; 
124         if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);} 
125         if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);} 
126     } 
127     this.Run=function(){ 
128         var delay = 10; 
129         interval=setInterval(obj.CustomMethod,delay); 
130         obj.onmouseover=function(){clearInterval(interval);} 
131         obj.onmouseout=function(){interval=setInterval(obj.CustomMethod, delay);} 
132     } 
133 } 
134 </SCRIPT> 
135 <DIV id=ad1 style="Z-INDEX: 5"> 
136     <div>
137         <IMG src="shangshui.jpg">
138     </div> 
139 </DIV> 
140 <SCRIPT type=text/javascript><!-- 
141 var ad1=new AdMove("ad1"); 
142 ad1.Run(); 
143         //多组漂浮 
144         //var ad1=new AdMove("ad2"); 
145 //ad2.Run(); 
146 //--> 
147 </SCRIPT>

 

div界面浮动插件

标签:

原文地址:http://www.cnblogs.com/a757956132/p/5497056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!