菜单栏滑动滑出效果

最新推荐文章于 2024-07-04 10:00:00 发布

Vivianluolita

最新推荐文章于 2024-07-04 10:00:00 发布

阅读量1.6k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Vivianluolita/article/details/78846701

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

例子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="${rsrcPath}common/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;
    };
})();