jQuery实现的指纹扫描效果实例(附演示与demo源码下载)_jquery
程序员文章站
2022-04-30 19:06:24
...
本文实例讲述了jQuery实现的指纹扫描效果。分享给大家供大家参考,具体如下:
");
switch(this.type) {
case "V": // 竖直
body.css({
"width": "1px",
"height": "300px"
});
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
运行效果截图如下:
点击此处查看在线演示效果。
具体代码如下:
demo
推荐阅读
-
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
-
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
-
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
-
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
-
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】