| <!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 { | |
| 100%; | |
| height: 100%; | |
| background: #f2f2f2; | |
| } | |
| ul { | |
| margin-left: 50px; | |
| } | |
| ul li { | |
| float: left; | |
| } | |
| ul li .outer { | |
| 300px; | |
| height: 250px; | |
| } | |
| ul li .outer .inner { | |
| 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> | |