<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>js direction</title> <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; font-family: Microsoft Yahei,sans-serif; } .container{ width: 1200px; margin: 0 auto; padding: 40px 0px; } .box { padding: 40px; } .iwrap { position: relative; width: 220px; height: 166px; margin: 0 auto; border: 1px solid #e2e2e2; overflow: hidden; } .iwrap .view { padding: 23px; height: 100%; } .iwrap .view span { display: block; } .iwrap .view span.t { height: 36px; line-height: 36px; font-size: 20px; color: #ababab; } .iwrap .view span.num { height: 48px; line-height: 48px; font-size: 48px; color: #6bc30d; font-family: arial; } .iwrap .float { position: absolute; width: 100%; height: 100%; background-color: #6bc30d; padding: 15px; top: -100%; left: -100%; } .iwrap .float .chart { position: relative; display: inline-block; width: 60px; height: 60px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; vertical-align: middle; } .iwrap .float .chart:before { position: absolute; display: block; content: " "; height: 55px; width: 10px; background-color: #ffffff; left: 4px; bottom: 3px; border-top-left-radius: 2px; border-top-right-radius: 2px; } .iwrap .float .chart:after { position: absolute; display: block; content: " "; height: 35px; width: 10px; background-color: #ffffff; left: 19px; bottom: 3px; border-top-left-radius: 2px; border-top-right-radius: 2px; } .iwrap .float .chart i { position: absolute; display: block; height: 20px; width: 10px; background-color: #ffffff; left: 33px; bottom: 3px; border-top-left-radius: 2px; border-top-right-radius: 2px; } .iwrap .float .chart i:before { position: absolute; display: block; content: " "; height: 6px; width: 10px; background-color: #ffffff; left: 14px; bottom: 0px; border-top-left-radius: 2px; border-top-right-radius: 2px; } .iwrap .float > span { color: #ffffff; font-size: 24px; } .iwrap .float > ul { list-style: none; overflow: hidden; margin-top: 20px; } .iwrap .float > ul li { float: left; width: 50%; height: 30px; line-height: 30px; } .iwrap .float > ul li b { color: #ffffff; font-weight: normal; } .iwrap .float > ul li span { color: #ffffff; } </style> </head> <body> <div class="container"> <div class="box"> <div class="iwrap"> <div class="view"> <span class="t">浏览</span> <span class="num">235</span> </div> <div class="float"> <i class="chart"><i></i></i> <span>笔记人气</span> <ul> <li><b>浏览：</b><span>235</span></li> <li><b>点赞：</b><span>10</span></li> <li><b>收藏：</b><span>5</span></li> <li><b>评论：</b><span>6</span></li> </ul> </div> </div> </div> </div> </body> </html> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function (){ var iwrap = $(".iwrap"); var float = $(".float"); iwrap.hover(function(e){//mouse in float.css(moveForward(iwrap, e)).stop(true, true).animate({"left":0, "top":0}, 500); },function(e){//mouse out float.animate(moveForward(iwrap, e), 500); }); }); var moveForward = function(elem, e){ var w = elem.width(), h = elem.height(), direction=0, cssprop={}; var x = (e.pageX - elem.offset().left - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - elem.offset().top - (h / 2)) * (h > w ? (w / h) : 1); direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; switch(direction) { case 0://from top cssprop.left = 0; cssprop.top = "-100%"; break; case 1://from right cssprop.left = "100%"; cssprop.top = 0; break; case 2://from bottom cssprop.left = 0; cssprop.top = "100%"; break; case 3://from left cssprop.left = "-100%"; cssprop.top = 0; break; } return cssprop; } </script>