演示效果：
项目需要做这个效果，把效果写出来了顺便就封装成了一个插件，也练习了一下插件的写法。
代码：
html:这个没什么说的，就是简单的布局：在图片上有一个介绍，介绍定位在区域外部。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/TweenMax.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> ul { width: 800px; margin: 100px auto; } ul li { display: inline-block; width: 45%; cursor: pointer; position: relative; margin-top: 30px; overflow: hidden; } ul li img { width: 100%; height: 100%; } ul li .info { position: absolute; width: 100%; height: 100%; top: 100%; left: 100%; background-color: rgba(255, 255, 255, .6); color: #f00; text-align: center; line-height: 80px; } </style> </head> <body> <ul class="clearfix"> <li> <img src="img/animation1.jpg" /> <div class="info">点我吧</div> </li> <li> <img src="img/animation2.jpg" /> <div class="info">点我吧</div> </li> <li> <img src="img/animation3.jpg" /> <div class="info">点我吧</div> </li> <li> <img src="img/animation4.jpg" /> <div class="info">点我吧</div> </li> </ul> <script src="js/lonelyAni.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $("ul li").lonelyMove({ moveClass: ".info" }); }); </script> </body> </html>
JS插件效果:把效果封装成了一个插件，以后直接调用就行了。
//移入移出插件 (function($) { $.fn.extend({ "lonelyMove": function(options) { var defaults = { time: .3, close: null } var opts = $.extend(true, defaults, options); var vision = /mobile/.test(navigator.userAgent.toLowerCase()); return $(this).on('mouseenter mouseleave', function(event) { if(!vision) { var event = event || window.event, liWidth = $(this).width(), liHeight = $(this).height(), u0 = (event.pageX - ($(this).offset().left) - (liWidth / 2)) * (liWidth > liHeight ? (liHeight / liWidth) : 1), F0 = (event.pageY - ($(this).offset().top) - (liHeight / 2)) * (liHeight > liWidth ? (liWidth / liHeight) : 1), index = Math.round((((Math.atan2(F0, u0) * (180 / Math.PI)) + 180) / 90) + 3) % 4, location = [{ 'top': "-100%", 'left': '0%' }, { 'top': '0%', 'left': "100%" }, { 'top': "100%", 'left': '0%' }, { 'top': '0%', 'left': "-100%" }], type = event.type; if(type == 'mouseenter') { $(this).find(opts.moveClass).css(location[index]); TweenMax.to($(this).find(opts.moveClass), opts.time, { css: { top: 0, left: 0 }, ease: Cubic.Linear }); } else { TweenMax.to($(this).find(opts.moveClass), opts.time, { css: location[index], ease: Cubic.Linear }); } } }); } }); })(jQuery);
