});
break;
case "H": // 水平
body.css({
"width": "300px",
"height": "1px"
});
break;
}
container.append(body);
self.body = body;
self.direct = self.type === "V" ? "R" : "B";
self.run = function() {
switch(self.direct) {
case "L":
self.body.animate({"left":0}, 1000, null, function() {
self.direct = "R";
self.run();
});
break;
case "R":
self.body.animate({"left":300}, 1000, null, function() {
self.direct = "L";
self.run();
});
break;
case "T":
self.body.animate({"top":0}, 1000, null, function() {
self.direct = "B";
self.run();
});
break;
case "B":
self.body.animate({"top":300}, 1000, null, function() {
self.direct = "T";
self.run();
});
break;
}
}
self.run();
}
var lineArray = [];
function output(type, time, opactiy) {
time = time || 2000;
var initHeight = type === "H" ? 0 : 300;
var initWidth = type === "H" ? 300 : 0;
type === "B" && (initHeight = initWidth = 0);
outputContainer.css({
"height": initHeight,
"width": initWidth,
"display": "block",
"opacity": opactiy || 1
});
outputContainer.animate({"height":300, "width":300}, time, null);
}
function clear() {
for(var i=0, len=lineArray.length; i<len; i++) {
var line = lineArray[i];
line.body.stop().remove();
}
container.find(".line").remove();
outputContainer.stop().css({"display": "none", "opacity": 0});
}
$("#hSee").click(function() {
clear();
lineArray.push(new Line("H"));
output("H", null, 0.5);
});
$("#vSee").click(function() {
clear();
lineArray.push(new Line("V"));
output("V", null, 0.5);
});
$("#bSee").click(function() {
clear();
lineArray.push(new Line("H"), new Line("V"));
output("B", 3500, 0.8);
});
$("#dSee").click(function() {
clear();
for(var i=0; i<5; i++) {
(function(index) {
setTimeout(function() {
lineArray.push(new Line("H"), new Line("V"));
}, index*200);
})(i);
}
output("B", 5000, 1.0);
});
</script>
</html>
完整实例代码点击此处本站下载。
