项目需要做这个效果，把效果写出来了顺便就封装成了一个插件，也练习了一下插件的写法。
代码：
html:这个没什么说的，就是简单的布局：在图片上有一个介绍，介绍定位在区域外部。
<!doctype html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/reset.css?1.1.10" /><script src="js/jquery-2.1.0.js?1.1.10" type="text/javascript" charset="utf-8"></script><script src="js/tweenmax.js?1.1.10" 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?1.1.10" 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);
以上就是一个简单的小动画效果的详细内容。