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


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 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python实现tail -f 功能
2020/01/17 Python
python解包用法详解
2021/02/17 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
旅游市场营销方案
2014/03/09 职场文书
2015年行政部工作总结
2015/04/28 职场文书
外科护士长工作总结
2015/08/12 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python