网站建设技巧

网站建设技巧

2006年起一直从事互联网行业,竭尽所能、尽心尽力为各行各业的客户提供服务

网站建设技巧 651次

纯JS全屏漂浮

请直接复制如下代码预览。


<!doctype html>

<html>  

<head>  

<meta name="Author" content="">  

<meta name="Keywords" content="">  

<meta name="Description" content="">  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  

<meta http-equiv="Cache-Control" content="no-cache">  

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">  

<meta name="MobileOptimized" content="320">  

<title>Document</title>  

<SCRIPT type=text/javascript> 

function 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; 

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.onmouseover=function(){clearInterval(interval);} 

obj.onmouseout=function(){interval=setInterval(obj.CustomMethod, delay);} 

</SCRIPT>  

</head>  

<body>  

<!--漂浮开始--> 

<DIV id=ad1 style="Z-INDEX: 5"><A href="http://wh.vanke.com/Art" target=_blank><IMG src="http://www.jb51.net/images/logo.gif"></A></DIV> 

<SCRIPT type=text/javascript>

<!-- 

var ad1=new AdMove("ad1"); 

ad1.Run(); 

//多组漂浮 

//var ad1=new AdMove("ad2"); 

//ad2.Run(); 

-->

</SCRIPT>

<!--漂浮结束-->

</body>  

</html>  


相关文章

联系我们

24小时服务热线

150 0622 7297

  • 微信二维码
    昆山网站建设
  • 微信二维码
    昆山网站建设

江苏苏州昆山市周市镇翠微西路

免费获取您的互联网建设与营销方案

欢迎访问WCDSTUDIO 24小时咨询电话15306227297