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


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实现的网页颜色代码表全集
Jul 17 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
JS简单计算器实例
Jan 20 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
js格式化时间小结
2014/11/03 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python中的filter()函数的用法
2015/04/27 Python
python实现FTP服务器服务的方法
2017/04/11 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
儿童编程python入门
2018/05/08 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
如何利用python读取micaps文件详解
2020/10/18 Python
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
保险公司晨会主持词
2014/03/22 职场文书
《锄禾》教学反思
2014/04/08 职场文书
化工专业自荐书
2014/06/16 职场文书
2014年医生工作总结
2014/11/21 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android