首页
资源
专题
注册
|
登录
当前位置:
网站首页
> 资源显示
js
兼容多浏览器的JS浮动广告
发布时间:
2017/4/30 20:56:15 /
最后修改:
2017-4-30 20:59:50 /
浏览:
563
很平滑自动适应屏幕分辨率的浮动广告效果,显示在Flash之上,不被任何风页元素遮挡,同时可以支持多个图片漂浮,速度和浮动随机位置都感觉不错
完整代码 (代码框可以往下拉高显示):
<style type="text/css"> img{border:0;} </style> <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> <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>
演示地址:
http://www.jb51.net/article/20274.htm
附件资源(免费)
您尚未登录,暂时无法查阅资源!
立即登录
插播广告区
发表评论
您尚未登录,暂时无法发表评论。
立即登录
暂无任何评论
推荐专题
更多专题
框架-插件集
ASP独立功能案例
ASP上传组件范例
编辑器插件详解
在线支付接口开发
常用广告轮换组件
常用在线客服组件
网页布局效果范例
ASP函数库汇总
ASP知识点详解
推荐资源
更多 >>
1
asp连接sqlite数据库代码!
2
ASP违禁词批处理V1.0_acces
3
关于height100和height1
4
aspJpeg_ASPS水印组件(安装
5
正文多图预览组件2(Viewer.js
6
正文多图预览组件(fancybox)
7
UNION多表联合查询,多表联合搜索问
8
jq隐藏table中的tr或td,防止
9
SQLServer2008数据库复制,
10
CSS解决长串英文字母显示不能自动换行
付费资源
更多 >>
1
ASP违禁词批处理V1.0_acces
2
A标签实现多选框赋值(限定选择个数)
3
云片网(短信验证码接入案例-ASP版本
4
模块选择(N个模块多选,每个模块可以选
5
多参数检索URL的参数处理(多条件查询
6
kindeditor_编辑器实战经验总
7
选择不同产品自动切换价格,价格切换JS
8
会员图像上传组件,flash上传头像剪
9
会员注册-登录-改密功能_gb2312
10
程序伪静态,URL静态化处理
广告区
CopyRight © 2017 www.kaifaku.cn All Rights Reserved - 版权所有 © 开发库 (所有资源来源于实战项目,拿来即用)
付费资源请联系 QQ:2633993818 / E-MAIL:2633993818@qq.com 本站免费分享资源不提供免费咨询