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


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 Event学习第五章 高级事件注册模型
Feb 07 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
原生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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
js实现tab切换效果
2017/02/16 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
生物科学专业个人求职信范文
2013/12/05 职场文书
预备党员思想汇报
2014/01/08 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
Python软件包安装的三种常见方法
2022/07/07 Python