js实现折叠、缓慢滑动效果

最新推荐文章于 2024-03-19 15:24:14 发布

weixin_34259159

最新推荐文章于 2024-03-19 15:24:14 发布

阅读量509

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/parker/blog/111559

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>MODEL</title>
    </head>
    <body>
    	<input type="button" value="展开/折叠" onclick = "_sliderInit('left',400,300,0,300);"/>
    	<div id="wrapper">
	        <div id="left" style="width:400px;height:300px;float:left;overflow:hidden;background:#eee;">
	            <div style="width:300px;">代码实例：层的滑动展开/折叠</div>
	        </div>
			<div id="right" style ="float:left;display:block;height:300px;background:#ddd;">
				<div class="content">右侧主要内容展示区域</div>
			</div>
		</div>
    </body>
</html>
<script type="text/javascript">
	/**
	 * @param {_sliderXbox,_sliderYbox} Object //The slider's Timer.
	 * @param {_sliderXOpen,_sliderYOpen} Boolean //Record the slider's status.
	 * @param {_Xmin,_Ymin} Number//Get the slider's width and height when the page ready.
	 */
    var _sliderXbox,_sliderYbox,_sliderXOpen = false,_sliderYOpen = false,_XMin,_YMin;
	//Record the panel's width and height
	function _sliderInit(sbox,toWidth,toHeight,lastXmin,lastYMin){
		if (lastXmin === null || lastXmin === undefined || lastXmin =='') {
			_XMin = sbox == (undefined || null) ? 0 : document.getElementById(sbox).offsetWidth;
		}else{
			_XMin =lastXmin;
		}
		if (lastYMin === null || lastYMin === undefined || lastYMin =='') {
			_YMin = sbox == (undefined || null) ? 0 : document.getElementById(sbox).offsetHeight;
		}else{
			_YMin = lastYMin;
		}
		if(lastXmin>=0 && lastYMin>=0){
			if(_sliderXOpen){
				_sliderXOver(sbox,toWidth);
				_sliderXOpen = false;
			}else{
				_sliderXOut(sbox,lastXmin);
				_sliderXOpen = true;
			}
			if(_sliderYOpen){
				_sliderYOver(sbox,toHeight);
				_sliderYOpen = false;
			}else{
				_sliderYOut(sbox,lastYMin);
				_sliderYOpen = true;
			}
		}else{
			alert("The function _sliderInit's params error");
		}
	}
	//Slide Left to Right
	function _sliderXOver(s, nMax){
        var obj = document.getElementById(s);
        if (obj != null && obj != undefined && obj != '') {
            var w = parseInt(obj.offsetWidth);
            if (nMax != null && nMax != undefined && w < nMax) {
                obj.style.width = (w + 1) + "px";
                clearTimeout(_sliderXbox);
                _sliderXbox = setTimeout("_sliderXOver('" + s + "'," + nMax + ")", 0);
            }
        }
    }
	function _sliderXOut(s, nMin){
        var obj = document.getElementById(s);
        if (obj != null && obj != undefined && obj !='') {
            var w = parseInt(obj.offsetWidth);
            if (w > nMin && w > _XMin) {
                obj.style.width = (w - 1) + "px";
                clearTimeout(_sliderXbox);
                _sliderXbox = setTimeout("_sliderXOut('" + s + "'," + nMin + ")", 0);
            }else if(nMin==0){
				obj.style.width = (w - 1) + "px";
				clearTimeout(_sliderXbox);
                _sliderXbox = setTimeout("_sliderXOut('" + s + "'," + 0 + ")", 0);
			}
        }
    }
	//Slide up and down
    function _sliderYOver(s, nMax){
        var obj = document.getElementById(s);
        if (obj != null && obj != undefined && obj !='') {
            var h = parseInt(obj.offsetHeight);
            if (nMax != null && nMax != undefined && h < nMax) {
                obj.style.height = (h + 1) + "px";
                clearTimeout(_sliderYbox);
                _sliderYbox = setTimeout("_sliderYOver('" + s + "'," + nMax + ")", 0);
            }
        }
    }
    function _sliderYOut(s, nMin){
        var obj = document.getElementById(s);
        if (obj != null && obj != undefined && obj !='') {
            var h = parseInt(obj.offsetHeight);
            if (h > nMin && h > _YMin) {
                obj.style.height = (h - 1) + "px";
                clearTimeout(_sliderYbox);
                _sliderYbox = setTimeout("_sliderYOut('" + s + "'," + nMin + ")", 0);
            }else if(nMin==0){
				 obj.style.height = (h - 1) + "px";
                clearTimeout(_sliderYbox);
                _sliderYbox = setTimeout("_sliderYOut('" + s + "'," + 0 + ")", 0);
			}
        }
    }
	/**
	 * Extend for the program
	 */
</script>

原文链接： http://bbs.51js.com/thread-61646-1-1.html

转载于:https://my.oschina.net/parker/blog/111559