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



146 583 195



特效描述:左右窗帘拉开 页面动画特效,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>



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


热门标签: 滚动导航菜单 html5动画导航菜单 滚动切换 html5图片动画 图片滚动 html5文字动画 文字滚动 html5表情动画 图片文字滚动 html5线条动画 全屏滚动 html5飘落动画 页面滚动 html5光标动画 html5悬停动画 滚动流动 加载动画 自动滚动图片轮播 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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