jQuery仿左右窗簾拉開頁面動畫特效



122 486 163



特效描述:左右窗簾拉開 頁面動畫特效,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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表