我想使用 jQuery 来创建就像用隐形笔绘制线条图的效果。
有点像这样:
http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html
我用其他一些库制作了这个模型,但我想知道是否有更简单的方法可以使用 jQuery 来做到这一点。我还希望能够制作曲线和不规则线条的动画。
我想为这样的绘图制作动画,例如:
http://commons.wikimedia.org/wiki/File:Mouse_line_drawing.jpg
是否有一个 jQuery 插件可以帮助创建这样的效果?
如果没有,您能建议一种简单有效的方法来使用 jQuery 实现这一点吗?
感谢您的建议!
最诚挚的问候,
迪米特里·沃龙佐夫
最佳答案
我尝试重现这个动画。我使用了一个 div,在其中放置了 4 个“border-div”,并使用 position:absolute
将它们放置为框架。
所有这些“border-div”的宽度均为 0px,以及 1px 实心黑色
边框。
当 DOM 准备就绪时,我将 border-div 逐一设置动画,将其大小更改为容器的尺寸:
$(function() {
$(".border, #content").hide();
$("#topbar").show();
$("#topbar").animate({width: "318px"}, 1000, function() {
$("#rightbar").show();
$("#rightbar").animate({height: "238px"}, 1000, function() {
$("#bottombar").show();
$("#bottombar").animate({width: "318px"}, 1000, function() {
$("#leftbar").show();
$("#leftbar").animate({height: "238px"}, 1000, function() {
$("#content").fadeIn(1000);
});
});
});
});
});
我不知道我是否清楚,英语不是我的母语,但我做了一个jsBin example here
您现在所要做的就是在整个网站上重复该过程!
关于jquery - 使用 jQuery 绘制动画线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6045286/