jquery元素从左上角飞入右下角代码实例
分类:实例代码
分享一段代码实例,它实现了元素从左上角飞入右下角效果。
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> </head> <body> <input type="button" name="b1" id="b1" value="停止" /> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> var time; deleteMove(); $("input").click(function() { $("div").stop(); }) function creatMove() { var tar = { left: 900, top: 500 } $(document.body).append("<div class='c1'></div>"); $(".c1").css({ width: "20px", height: "20px", backgroundColor: "red", position: "absolute" }) $(".c1").animate(tar, 2000, function() { $(this).removeAttr("class").addClass("c2"); creatMove(); }) } function deleteMove() { creatMove(); clearInterval(time); time = setInterval(function() { var a = Math.round(parseFloat($(".c1").css("left"))) if (900 - a <= 100) { $("div").remove(".c2"); } }, 30) } </script> </body> </html>
jquery元素从左上角飞入右下角代码实例,这样的场景在实际项目中还是用的比较多的,关于jquery元素从左上角飞入右下角代码实例就介绍到这了。
jquery元素从左上角飞入右下角代码实例属于前端实例代码,有关更多实例代码大家可以查看。