首页图片漂浮效果示例代码


Posted in Javascript onJune 05, 2014
<!--首页图片漂浮开始--> 
<script type="text/javascript" language="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=ad2 style="Z-INDEX: 5;position:relative"> 
<a href='PoliceHTk.aspx' target='_blank'><IMG src="images/fudong/fudong.jpg" width="230" height="150" border="0" > </a><br> <a href="#" onclick="document.getElementById('ad2').style.display='none'">                   <img border=0 src=images/fudong/close1.gif /></a> 
<!--漂浮结束--> 
</DIV> 
<script type="text/javascript" language="javascript"> 
var ad2 = new AdMove("ad2"); 
ad2.Run(); 
//多组漂浮 
</script> 
<!-- 首页图片漂浮结束 -->
Javascript 相关文章推荐
javascript String 对象
Apr 25 Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
Javascript自定义事件详解
Jan 13 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 #Javascript
javascript的事件触发器介绍的实现
Jun 05 #Javascript
javascript中attribute和property的区别详解
Jun 05 #Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 #Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 #Javascript
javascript数组去重方法终极总结
Jun 05 #Javascript
javascript设计模式之解释器模式详解
Jun 05 #Javascript
You might like
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python可以用来做什么
2020/11/23 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
管理科学大学生求职信
2013/11/13 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
办公室助理岗位职责
2013/12/25 职场文书
中文教师求职信
2014/02/22 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
白鹤梁导游词
2015/02/06 职场文书
中班下学期个人总结
2015/02/12 职场文书
2015年教学工作总结
2015/04/02 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
Python装饰器的练习题
2021/11/23 Python