Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to write a floating multi-group picture advertisement code compatible with major browsers with close buttons". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to write a floating multi-group picture advertisement code that is compatible with major browsers with close buttons.

JS section:

The copy code is as follows:

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);}

}

}

Var ad2 = new AdMove ("ad2")

Ad2.Run ()

/ / multiple groups of floating

Html section:

The copy code is as follows:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.