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


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学习笔记 delete运算符
Sep 13 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
jQuery动态添加
Apr 07 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
详解Vue底部导航栏组件
May 02 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
JavaScript 空间坐标的使用
Aug 19 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中文分词的简单实现代码分享
2011/07/17 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
Node.js编码规范
2014/07/14 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python实现图片识别汽车功能
2018/11/30 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python把1变成01的步骤总结
2019/02/27 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
预备党员的自我评价
2014/03/12 职场文书
房产公证委托书范本
2014/09/20 职场文书
结婚堵门保证书
2015/05/08 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL