特效描述:左右窗帘拉开 页面动画特效,jQuery仿窗帘左右拉开动画,展开完成后移除dom,窗帘拉开页面动画特效,窗帘动画。
代码结构
1. 引入JS
2. HTML代码
/*
裁剪效果
o:jq
d:方向,1=向左,2=向右
n:递减的单位(相素)
*/
function clip(o, d, n) {
var w = o.width();
var h = o.height();
var offset = o.offset();
var l = offset.left;
var t = offset.top;
var pw = o.parent().width();
if (d == 1) {
w -= n;
o.width(w);
return w > 0;
}
else if (d == 2) {
l += n;
o.css("left", l);
return pw > l;
}
return true;
}
function clipL() {
var r = clip($("#leftPie"), 1, 20);
if (!r) {
clearInterval(timL);
$("#leftPie").remove();
}
}
var timL = setInterval("clipL()", 100);
function clipR() {
var r = clip($("#rightPie"), 2, 20);
if (!r) {
clearInterval(timR);
$("#rightPie").remove();
}
}
var timR = setInterval("clipR()", 100);