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


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 相关文章推荐
js对象的比较
Feb 26 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
动态加载js的方法汇总
Feb 13 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
精通JavaScript的this关键字
May 28 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
js删除数组中某几项的方法总结
Jan 16 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
原生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批量生成缩略图的代码
2008/07/19 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
解决Vue动态加载本地图片问题
2019/10/09 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
用python写测试数据文件过程解析
2019/09/25 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
零基础小白多久能学会python
2020/06/22 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
师范生自荐信范文
2013/10/06 职场文书
酒店服务与管理毕业生求职信
2013/11/02 职场文书
代理商会议邀请函
2014/01/27 职场文书
英语课外活动总结
2014/08/27 职场文书
个人借款协议书范本
2014/11/17 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python