當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS 全站漂浮

發(fā)布時間：2023/12/20 javascript 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS 全站漂浮小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

全站漂浮的js代碼：

//公共腳本文件 main.jsfunction addEvent(obj,evtType,func,cap){cap=cap||false;if(obj.addEventListener){obj.addEventListener(evtType,func,cap);return true;}else if(obj.attachEvent){if(cap){obj.setCapture();return true;}else{return obj.attachEvent("on" + evtType,func);}}else{return false;}}function getPageScroll(){var xScroll,yScroll;if (self.pageXOffset) {xScroll = self.pageXOffset;} else if (document.documentElement && document.documentElement.scrollLeft){xScroll = document.documentElement.scrollLeft;} else if (document.body) {xScroll = document.body.scrollLeft;}if (self.pageYOffset) {yScroll = self.pageYOffset;} else if (document.documentElement && document.documentElement.scrollTop){yScroll = document.documentElement.scrollTop;} else if (document.body) {yScroll = document.body.scrollTop;}arrayPageScroll = new Array(xScroll,yScroll);return arrayPageScroll;}function GetPageSize(){var xScroll, yScroll;if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth;yScroll = window.innerHeight + window.scrollMaxY;} else if (document.body.scrollHeight > document.body.offsetHeight){xScroll = document.body.scrollWidth;yScroll = document.body.scrollHeight;} else {xScroll = document.body.offsetWidth;yScroll = document.body.offsetHeight;}var windowWidth, windowHeight;if (self.innerHeight) {windowWidth = self.innerWidth;windowHeight = self.innerHeight;} else if (document.documentElement && document.documentElement.clientHeight) {windowWidth = document.documentElement.clientWidth;windowHeight = document.documentElement.clientHeight;} else if (document.body) {windowWidth = document.body.clientWidth;windowHeight = document.body.clientHeight;} if(yScroll < windowHeight){pageHeight = windowHeight;} else { pageHeight = yScroll;}if(xScroll < windowWidth){ pageWidth = windowWidth;} else {pageWidth = xScroll;}arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize;}//廣告腳本文件 AdMove.js/*例子<div id="Div2">***** content ******</div>var ad=new AdMove("Div2");ad.Run();*/var AdMoveConfig=new Object();AdMoveConfig.IsInitialized=false;AdMoveConfig.ScrollX=0;AdMoveConfig.ScrollY=0;AdMoveConfig.MoveWidth=0;AdMoveConfig.MoveHeight=0;AdMoveConfig.Resize=function(){var winsize=GetPageSize();AdMoveConfig.MoveWidth=winsize[2];AdMoveConfig.MoveHeight=winsize[3];AdMoveConfig.Scroll();}AdMoveConfig.Scroll=function(){var winscroll=getPageScroll();AdMoveConfig.ScrollX=winscroll[0];AdMoveConfig.ScrollY=winscroll[1];}addEvent(window,"resize",AdMoveConfig.Resize);addEvent(window,"scroll",AdMoveConfig.Scroll);function AdMove(id){if(!AdMoveConfig.IsInitialized){AdMoveConfig.Resize();AdMoveConfig.IsInitialized=true;}var obj=document.getElementById(id);obj.style.position="absolute";var W=AdMoveConfig.MoveWidth-obj.offsetWidth;var H=AdMoveConfig.MoveHeight-obj.offsetHeight;var x = W*Math.random(),y = H*Math.random();var rad=(Math.random()+1)*Math.PI/6;var kx=Math.sin(rad),ky=Math.cos(rad);var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1);var step = 1;var interval;this.SetLocation=function(vx,vy){x=vx;y=vy;}this.SetDirection=function(vx,vy){dirx=vx;diry=vy;}obj.CustomMethod=function(){obj.style.left = (x + AdMoveConfig.ScrollX) + "px";obj.style.top = (y + AdMoveConfig.ScrollY) + "px";rad=(Math.random()+1)*Math.PI/6;W=AdMoveConfig.MoveWidth-obj.offsetWidth;H=AdMoveConfig.MoveHeight-obj.offsetHeight;x = x + step*kx*dirx;if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);} if (x > W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);}y = y + step*ky*diry;if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);} if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);}}this.Run=function(){var delay = 10;interval=setInterval(obj.CustomMethod,delay);obj.οnmοuseοver=function(){clearInterval(interval);}obj.οnmοuseοut=function(){interval=setInterval(obj.CustomMethod, delay);}}}

html中的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="js/piaofu.js"></script> </head><body> <div id="img1" style="width: 200px; height: 100px; z-index: 100000;"><img src="images/piaofu.jpg" usemap="#piaofu"/><map name="piaofu"><area shape="rect" coords="185,0,199,15" href="" οnclick="return closePiaofu();" /><area shape="rect" coords="110,75,199,99" href="http://10.0.0.37/jcbcard.php" /></map> </div> <script type="text/javascript"> var ad1=new AdMove("img1",true); ad1.Run(); </script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的JS 全站漂浮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

js
全站