当前位置: 首页 > 编程笔记 >

兼容各大浏览器带关闭按钮的漂浮多组图片广告代码

秦永望
2023-03-14
本文向大家介绍兼容各大浏览器带关闭按钮的漂浮多组图片广告代码,包括了兼容各大浏览器带关闭按钮的漂浮多组图片广告代码的使用技巧和注意事项,需要的朋友参考一下

JS部分: 

<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>

<script type="text/javascript" language="javascript">

    var ad2 = new AdMove("ad2");     ad2.Run();     //多组漂浮 </script>

html部分:

<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'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img border=0 src=images/fudong/close1.gif /></a> 
</DIV>

 类似资料:
  • 本文向大家介绍基于JavaScript代码实现随机漂浮图片广告,包括了基于JavaScript代码实现随机漂浮图片广告的使用技巧和注意事项,需要的朋友参考一下 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮代码,使需要的朋友免去大量改造代码的繁琐。 代码一: 代码如下: 以上代码实现了我们的要求

  • 本文向大家介绍完美兼容各大浏览器的jQuery插件实现图片切换特效,包括了完美兼容各大浏览器的jQuery插件实现图片切换特效的使用技巧和注意事项,需要的朋友参考一下 文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦。。。 JS代码部分: CSS代码部分: HTML代码部分:

  • 本文向大家介绍完美兼容多浏览器的js判断图片路径代码汇总,包括了完美兼容多浏览器的js判断图片路径代码汇总的使用技巧和注意事项,需要的朋友参考一下 第一种方式 另外一种实现方式 第三种方式 以上所述就是本文的全部内容了,希望大家能够喜欢。

  • 浏览器兼容 主流浏览器都兼容 HTML5 的新标签,对于 IE8 及以下版本不认识 HTML5的新元素,可以使用 JavaScript 创建一个没用的元素来解决,例如: <script> document.createElement("header"); </script> 也可以使用 shiv 来解决兼容性问题,详情可参考 HTML5 Shiv

  • 主要是针对各种浏览器的兼容,可以支持webp的浏览器,懒加载就加载webp文件,否则加载Jpg等?

  • 问题内容: 我的页面宽50/50。左半部分具有六个div的行。条件: 6个正方形必须始终保持正方形。 前5个正方形应在右边留有边距/填充以进行分隔。 所有六个正方形必须保持同一行。如果我可以使它正常工作,那么我可以对较小的视口中的响应度进行必要的调整。 跨浏览器兼容最新版本的chrome和firefox。 L1 L2 L3 L4 L5 L6 问题答案: The main trick here is