标签:margin family oat nbsp off min bsp .sh word
<!doctype html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | |
<meta name="Generator" content="EditPlus?"> | |
<meta name="Author" content=""> | |
<meta name="Keywords" content=""> | |
<meta name="Description" content=""> | |
<title>Demo</title> | |
<style> | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
ul, | |
li { | |
list-style: none; | |
} | |
div { | |
font-family: "Microsoft YaHei"; | |
} | |
html, | |
body { | |
width: 100%; | |
height: 100%; | |
background: #f2f2f2; | |
} | |
ul { | |
margin-left: 50px; | |
} | |
ul li { | |
float: left; | |
} | |
ul li .outer { | |
width: 300px; | |
height: 250px; | |
} | |
ul li .outer .inner { | |
width: 300px; | |
height: 250px; | |
background: rgba(0, 0, 0, .3); | |
} | |
</style> | |
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script> | |
</head> | |
<body> | |
<ul> | |
<li> | |
<div class="outer"> | |
<img src="img/a1.png" width="300px" height="250px" /> | |
<div class="inner"> | |
这是描述。。。 | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="outer"> | |
<img src="img/a2.png" width="300px" height="250px" /> | |
<div class="inner"> | |
这是描述。。。 | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="outer"> | |
<img src="img/a3.png" width="300px" height="250px" /> | |
<div class="inner"> | |
这是描述。。。 | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="outer"> | |
<img src="img/a4.png" width="300px" height="250px" /> | |
<div class="inner"> | |
这是描述。。。 | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="outer"> | |
<img src="img/a5.png" width="300px" height="250px" /> | |
<div class="inner"> | |
这是描述。。。 | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="outer"> | |
<img src="img/a6.png" width="300px" height="250px" /> | |
<div class="inner"> | |
这是描述。。。 | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="outer"> | |
<img src="img/a7.png" width="300px" height="250px" /> | |
<div class="inner"> | |
这是描述。。。 | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="outer"> | |
<img src="img/a8.png" width="300px" height="250px" /> | |
<div class="inner"> | |
这是描述。。。 | |
</div> | |
</div> | |
</li> | |
</ul> | |
<script> | |
; | |
(function($) { | |
$.fn.extend({ | |
show: function(div) { | |
var w = this.width(), | |
h = this.height(), | |
xpos = w / 2, | |
ypos = h / 2, | |
eventType = "", | |
direct = ""; | |
this.css({ | |
"overflow": "hidden", | |
"position": "relative" | |
}); | |
div.css({ | |
"position": "absolute", | |
"top": this.width() | |
}); | |
this.on("mouseenter mouseleave", function(e) { | |
var oe = e || event; | |
var x = oe.offsetX; | |
var y = oe.offsetY; | |
var angle = Math.atan((x - xpos) / (y - ypos)) * 180 / Math.PI; | |
if (angle > -45 && angle < 45 && y > ypos) { | |
direct = "down"; | |
} | |
if (angle > -45 && angle < 45 && y < ypos) { | |
direct = "up"; | |
} | |
if (((angle > -90 && angle < -45) || (angle > 45 && angle < 90)) && x > xpos) { | |
direct = "right"; | |
} | |
if (((angle > -90 && angle < -45) || (angle > 45 && angle < 90)) && x < xpos) { | |
direct = "left"; | |
} | |
move(e.type, direct) | |
}); | |
function move(eventType, direct) { | |
if (eventType == "mouseenter") { | |
switch (direct) { | |
case "down": | |
div.css({ | |
"left": "0px", | |
"top": h | |
}).stop(true, true).animate({ | |
"top": "0px" | |
}, "fast"); | |
break; | |
case "up": | |
div.css({ | |
"left": "0px", | |
"top": -h | |
}).stop(true, true).animate({ | |
"top": "0px" | |
}, "fast"); | |
break; | |
case "right": | |
div.css({ | |
"left": w, | |
"top": "0px" | |
}).stop(true, true).animate({ | |
"left": "0px" | |
}, "fast"); | |
break; | |
case "left": | |
div.css({ | |
"left": -w, | |
"top": "0px" | |
}).stop(true, true).animate({ | |
"left": "0px" | |
}, "fast"); | |
break; | |
} | |
} else { | |
switch (direct) { | |
case "down": | |
div.stop(true, true).animate({ | |
"top": h | |
}, "fast"); | |
break; | |
case "up": | |
div.stop(true, true).animate({ | |
"top": -h | |
}, "fast"); | |
break; | |
case "right": | |
div.stop(true, true).animate({ | |
"left": w | |
}, "fast"); | |
break; | |
case "left": | |
div.stop(true, true).animate({ | |
"left": -w | |
}, "fast"); | |
break; | |
} | |
} | |
} | |
} | |
}); | |
})(jQuery) | |
/* | |
*使用说明: | |
* $(".a").show($(".b")) | |
* a是展示层,b是遮罩层 | |
* b在a的内部 | |
*/ | |
$(".outer").each(function(i){ | |
$(this).show($(".inner").eq(i)); | |
}); | |
</script> | |
</body> | |
</html> | |
标签:margin family oat nbsp off min bsp .sh word
原文地址:http://www.cnblogs.com/xfdmb/p/6086120.html