研究一下午滑动边栏效果

来源:互联网 发布:知乎论坛网站彭加木 编辑:程序博客网 时间:2024/03/29 22:59
<div class="main"><div class="left">    <div class="left_top">    H辉    </div>    <div class="left_mid">    <ul>        <li><p>HOME</p><a href="">首页</a></li>            <li><p>About Us</p><a href="">公司概况</a></li>            <li><p>NEWS</p><a href="">最新动态</a></li>            <li><p>WORKS</p><a href="">优秀作品</a></li>            <li><p>CONTENTS</p><a href="">业务洽谈</a></li>            <img src="images/code2.png" /><script type="text/javascript"> $(document).ready(function(){$(".main .left_mid ul li").mouseenter(function(){    $(this).children("p").css("top","-50px");$(this).children("a").css("top","-50px");});$(".main .left_mid ul li").mouseleave(function(){    $(this).children("p").css("top","0px");$(this).children("a").css("top","0px");});});</script>        </ul>    </div>        </div></div>

html文件

*{ background:#2868c8; border:0px; margin:0px auto; padding:0px; list-style:none}* a{ text-decoration:none}.main{ width:1180px; height:auto}.main *{ float:left}.left{ width:15%; height:700px; background:#999;}.left_top{ width:100%; height:120px; background:#F00;}.left_mid{ width:100%; height:400px; background:#33F}.left_mid ul{ width:100%;}.left_mid li{ width:100%; height:50px; background:inherit; border-right:solid 2px #999; line-height:50px; position:relative; overflow:hidden;}.left_mid li p{ width:80%; padding-left:20%; color:#FFF; font-family:Arial, Helvetica, sans-serif; background:#006; position:relative;transition: top 0.5s, transform 0.5s;-moz-transition: top 0.5s, -moz-transform 0.5s;-webkit-transition:top 0.5s, -webkit-transform 0.5s;-o-transition: top 0.5s,-o-transform 0.5s;}.left_mid li a{ width:80%; padding-left:20%; color:#333; font-family:"微软雅黑"; position:relative;transition: top 0.5s, transform 0.5s;-moz-transition: top 0.5s, -moz-transform 0.5s;-webkit-transition:top 0.5s, -webkit-transform 0.5s;-o-transition: top 0.5s,-o-transform 0.5s;}.left_mid li a:hover{ background:#999}.left_mid img { width:100%; height:100%;}


0 0
原创粉丝点击