jQuery仿左右窗帘拉开页面动画特效



113 450 151



特效描述:左右窗帘拉开 页面动画特效,jQuery仿窗帘左右拉开动画,展开完成后移除dom,窗帘拉开页面动画特效,窗帘动画。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.js"></script>

2. HTML代码

<div id="leftPie"></div>
<div id="rightPie"></div> 
<div class="main"></div> 
<script type="text/javascript">
/*
裁剪效果
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);
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 加载动画 自动滚动图片轮播 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片滚动 图片滚动条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到