菜单栏滑动滑出效果

Posted 2022-12-09 Vivianluolita

例子1
slideDiv向右向左滑出

<ta:panel fit="true" cols="10">
        <ta:box cols="1" fit="true" cssStyle="position:relative;">

            <div id="slideDiv"
                style="border:1px solid #ccc;margin-left:-150%;background-color:white;width:100%;height:100%;position:absolute;z-index: 2;transition: width 0.5s;margin-top: 44px">

            </div>
            <div
                style="font-weight:bold;cursor:pointer;width:100%;height: 50px;line-height:44px;font-size: 14px;color: #0a51c1"
                onmouseover="fnSlide();" onmouseout="fnHide(event)">人员列表></div>
            <div id="portfolio_photo" class="portfolio_photo" style="z-index:1;">
                <div>
                    <div class="zyBox"
                        style='height:170px;width:100%;position: absolute;display: none;background: #ccc;opacity:0.5'
                        onclick="fnaddfile(this)"><div style='color:white;margin:30px;font-size: 15px;line-height: 98px;opacity:1'>编辑头像</div></div>
                    <image id="imgId" src="$rsrcPathcommon/images/user.png"
                        style='height:150px;width:100%;margin-top: 5px;margin-bottom: 5px;'
                        alt="图片" onclick="fnaddfile(this)"></image>
                </div>
                <input type="file" style="display: none" key="上传文件" id="theFile"
                    name="theFile" onChange="fnfileChange()"></input>
            </div>

JS
function fnSlide()
        $("#slideDiv").css("transition","margin-left 0.5s").css("margin-left","0").bind("mouseleave",function()
            $("#slideDiv").css("transition","margin-left 0.5s").css("margin-left","-150%");
        ); 
    
    //当目标元素里包含“序号”或者“字母”，则不滑出
    function fnHide(event)
        if(event.toElement.innerhtml=="序号"||event.toElement.innerHTML=="姓名")
            return null;
        //否则滑出
         $("#slideDiv").css("transition","margin-left 0.5s").css("margin-left","-150%");
        console.log(event);
    

例二：

CSS代码：
.box 
    width: 400px; padding: 15px;  background-color: #f0f3f9;

.container 
    height: 0; position: relative;  overflow: hidden;
    -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    -o-transition: height 0.6s;
    transition: height 0.6s;

.container img   
    position: absolute;  bottom: 0;

HTML代码：
<p>想看美女图片？<a href="javascript:" id="button">点击我</a></p>
<div id="more" class="container">
    <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" height="191" />
</div>
JS代码：
(function() 
    var eleBtn = document.getElementById("button"),
        eleMore = document.getElementById("more");

    var display = false;

    eleBtn.onclick = function() 
        display = !display;
        eleMore.style.height = display? "192px": "0px"
        return false;
    ;
)();

http://www.zhangxinxu.com/study/201210/true-slide-transition.html