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

This article mainly explains "HTML how to achieve the effect of advertising through the wall on the home page of pull hook net". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "HTML how to achieve the effect of advertising through the wall on the home page of pull hook net"!

Code:

Title

* {margin:0; padding:0; list-style:none;}

Ul {overflow:hidden; width:630px; margin:100px auto;}

Ul li {float:left; position:relative; width:200px; height:200px; background:#ccc; margin:5px; overflow:hidden;}

Ul li span {position:absolute; width:100%; height:100%; background:rgba (255, 010, 0. 3); left:-200px; top:0;}

Function getStyle (obj,sName) {

Return (obj.currentStyle | | getComputedStyle (obj,false)) [sName]

}

Function move (obj,json,options) {

Options = options | | {}

Options.duration = options.duration | | 700

Options.easing = options.easing | | 'ease-out'

Var start = {}

Var dis = {}

For (var name in json) {

Start [name] = parseFloat (getStyle (obj,name))

Dis [name] = Jason [name]-start [name]

}

Var count = Math.floor (options.duration/30)

Var n = 0

ClearInterval (obj.timer)

Obj.timer = setInterval (function () {

Nasty +

For (var name in json) {

Switch (options.easing) {

Case 'linear':

Var cur = start [name] + dis [name] * n/count

Break

Case 'ease-in':

Var a = n/count

Var cur = start [name] + dis [name] * Math.pow (a meme 3)

Break

Case 'ease-out':

Var a = 1-n/count

Var cur = start [name] + dis [name] * (1-Math.pow (a meme 3))

Break

}

If (name=='opacity') {

Obj.style.opacity = cur

Obj.style.filter = 'alpha (opacity:'+cur*100+')'

} else {

Obj.style [name] = cur+'px'

}

}

If (n==count) {

ClearInterval (obj.timer)

Options.complete&&options.complete ()

}

}, 30)

}

Function a2d (n) {

Return n*180/Math.PI

}

Function hoverDir (ev,obj) {

Var a = ev.clientX-obj.offsetLeft-obj.offsetWidth/2

Var b = obj.offsetTop+obj.offsetHeight/2-ev.clientY

Return Math.round ((a2d (Math.atan2 (brecom a)) + 180) / 90) 4

}

Function through (obj) {

Var oS = obj.children [0]

Obj.onmouseenter = function (ev) {

Var oEvent = ev | | event

Var dir = hoverDir (oEvent,obj)

Switch (dir) {

Case 0:

/ / left

OS.style.left ='- 200px'

OS.style.top = 0

Break

Case 1:

/ / under

OS.style.left = 0

OS.style.top = '200px'

Break

Case 2:

/ / right

OS.style.left = '200px'

OS.style.top = 0

Break

Case 3:

/ / on

OS.style.left = 0

OS.style.top ='- 200px'

Break

}

Move (oS, {left:0,top:0})

}

Obj.onmouseleave = function (ev) {

Var oEvent = ev | | event

Var dir = hoverDir (oEvent,obj)

Switch (dir) {

Case 0:

Move (oS, {left:-200,top:0})

Break

Case 1:

Move (oS, {left:0,top:200})

Break

Case 2:

Move (oS, {left:200,top:0})

Break

Case 3:

Move (oS, {left:0,top:-200})

Break

}

}

}

_ window.onload = function () {

Var aLi = document.getElementsByTagName ('li')

For (var iTuno Bandi)

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.