抛物线
Posted 1rookie
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了抛物线相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div.panel{ width: 400px; height: 500px; border: 1px solid #000; float: left; } .btn{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div class="btn"></div> <div class="panel"> <div class="item"> <img class="photo" src="http://placekitten.com/150" width="100" height="100" /> 小猫飞飞 </div> <div class="item"> <img class="photo" src="http://placekitten.com/150" width="100" height="100" /> 小猫飘飘 </div> <div class="item"> <img class="photo" src="http://placekitten.com/150" width="100" height="100" /> 小猫爬爬 </div> </div> <div class="panel target"> <div class="item"> <img class="photo" src="http://placekitten.com/150" width="100" height="100" /> 小猫飞飞 </div> <div class="item"> <img class="photo" src="http://placekitten.com/150" width="100" height="100" /> 小猫飘飘 </div> <div class="item"> <img class="photo" src="http://placekitten.com/150" width="100" height="100" /> 小猫爬爬 </div> </div> <div class="panel"> <div class="item"> <img class="photo" src="http://placekitten.com/150" width="100" height="100" /> 小猫飞飞 </div> <div class="item"> <img class="photo" src="http://placekitten.com/150" width="100" height="100" /> 小猫飘飘 </div> <div class="item"> <img class="photo" src="http://placekitten.com/150" width="100" height="100" /> 小猫爬爬 </div> </div> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script> $(‘div.item‘).on(‘click‘, function(){ var $orgImg = $(‘img‘, this); console.log($orgImg[0]) var $targetDiv = $(‘div.target‘); console.log($targetDiv[0]) var $fxImg = $orgImg.clone().css({ ‘position‘: ‘absolute‘, ‘z-index‘: 10000, ‘width‘: $orgImg.width(), ‘height‘: $orgImg.height(), ‘border-radius‘: ‘50%‘ }).css($orgImg.offset()).appendTo(‘body‘); $fxImg .animate({ left: [$targetDiv.offset().left + $targetDiv.width() - $fxImg.width(), ‘linear‘], top: [$targetDiv.offset().top + $targetDiv.height() - $fxImg.height(), ‘easeInBack‘] }, 600) .fadeOut(200, function () { $fxImg.detach(); }); }); </script> </body> </html>
以上是关于抛物线的主要内容，如果未能解决你的问题，请参考以下文章