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


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 相关文章推荐
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 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脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
js 深拷贝函数
2008/12/04 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
使用Python生成XML的方法实例
2017/03/21 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
什么是python的列表推导式
2020/05/26 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
社区敬老月活动实施方案
2014/02/17 职场文书
读书活动总结
2014/04/28 职场文书
小学生环保倡议书
2014/05/15 职场文书
群众路线剖析材料
2014/09/30 职场文书
社区端午节活动总结
2015/02/11 职场文书