How to realize the effect of imitating the advertisement through the wall on the home page of pull hook net by HTML
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)
