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


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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
JScript实现地址选择功能
Aug 15 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 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 mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
php生成word并下载代码实例
2019/03/15 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python实现杨辉三角思路
2017/07/14 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
部队学习十八大感言
2014/01/11 职场文书
推广普通话演讲稿
2014/05/23 职场文书
学校食品安全实施方案
2014/06/14 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫