首页网站运营网站建设教程

网站运营

官方动态

网站建设教程

网站建设知识

网站建设与管理

纯JS全屏漂浮

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


<!doctype html>  

<html lang="en">  
<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>  

发表时间

20170321

文章标签

被浏览次数

点我搜索

“CSS”相关的文章

  • 昆山网站建设小编讲讲IIS如何使用

    2018-12-14

    通过前文《如何在win7系统里创建ASP程序测试环境》我们学会了在win7系统里面安装IIS,那么如何使用IIS来创建运行网站呢?...

  • Ps Play无法连接的问题

    2018-04-05

    前段时间发了一个替代Ps Play的移动端设计稿预览工具,不过做为日常不太使用PsMirror的人来说,可能不会去专门购买,所以还是用回了Ps Play,也顺便解决了无法连接预览的问题。...

  • 替代Ps play的设计稿实时预览工具PsMirror

    2018-01-31

    PsMirror是一款实时预览photoshop设计稿的工具。 它让你极方便地在手机上查看PS中的设计稿, 提升设计效率。 支持android/ios两个平台......

  • 配置PHPStorm2017主题(颜色字体)

    2017-12-24

    PHPstorm默认的主题和可选的主题有时候不能满足有些人的需求,怎么配置自己喜欢的主题呢?首先先去下载自己喜欢的主题:http://www.phpstorm-themes.com/...

  • 使用css解决视频大小自适应

    2017-03-07

    自适应网站有的时候会碰到视频页面,那么怎么样才能让页面中的视频也能自适应设备屏幕尺寸呢?...

  • 如何优化自己的网站

    2016-12-19

    一个网站如果我们访问的时候,他的页面打开速度很慢,或者页面看起来很糟糕,看起来很费劲,让人不舒服,那么都是会影响访客的体验,使访客失去继续访问的兴趣,那么怎么优化自己的网站就是一件很重要的事。...

WCDSTUDIO专注于互联网服务

立即沟通您的需求
版权所有 WCDSTUDIO © All Rights Reserved 2015-2020CSS快速查询CSS选择符演示html常用标签演示flexui