公司后台切图

一.三级菜单的切图

HTML：

<div class="subNavBox">
            <div class="subNav">
                 <div class="mident"></div>
                 <div class="mword">我的工作</div>
                 <div class="clear"></div>
            </div>
            <ul class="navContent " style="display:block;">
                    <li><div class="smamun" onclick="$('#thr1').slideToggle(300);">汇报</div>
                        <ul id="thr1" class="thrmenu" style="display:block;">
                           <li><a href="#">今日工作</a></li>
                           <li><a href="#">明日工作</a></li>
                           <li><a href="#">工作计划</a></li>
                        </ul>
                        
                        
                    </li>
                    <li class="btmline"></li>
                    <li><div class="smamun" onclick="$('#thr2').slideToggle(300);">申请</div>
                         <ul id="thr2" class="thrmenu" style="display:block;">
                           <li><a href="#">请假</a></li>
                           <li><a href="#">出差</a></li>
                           <li><a href="#">费用</a></li>
                           <li><a href="#">报销</a></li>
                        </ul>
                        
                    </li>
                    <li class="btmline"></li>
                    <li><div class="smamun">日清日结</div></li>
                    <li class="btmline"></li>
                    <li><div class="smamun">短信群发</div></li>
                    <li class="btmline"></li>
            </ul>
            <div class="subNav">
                 <div class="mident1"></div>
                 <div class="mword">我的客户</div>
                 <div class="clear"></div>
             </div>
            
            <div class="subNav">
                 <div class="mident2"></div>
                 <div class="mword">查询</div>
                 <div class="clear"></div>
             </div>
            
            <div class="subNav">
                 <div class="mident3"></div>
                 <div class="mword">管理</div>
                 <div class="clear"></div>
             </div>
            
        </div>

css:

.subNavBox{200px; height:auto;margin:auto;}
.subNav{ height:44px;cursor:pointer; background:url(../img/bmenul.png) left bottom repeat-x;}
.subNav .mident{ 27px; height:23px; float:left; margin-top:12px; margin-left:10px; background:url(../img/icon.png) -2px -31px no-repeat;}
.subNav .mident1{ 27px; height:23px; float:left; margin-top:12px; margin-left:10px; background:url(../img/icon.png) -2px -112px no-repeat;}
.subNav .mident2{ 27px; height:23px; float:left; margin-top:12px; margin-left:10px; background:url(../img/icon.png) -3px -71px no-repeat;}
.subNav .mident3{ 27px; height:23px; float:left; margin-top:12px; margin-left:10px; background:url(../img/icon.png) -3px -157px no-repeat;}

.subNav .mword{ auto; height:23px; float:left; margin-top:10px;_margin-top:13px; margin-left:9px; line-height:23px; font-weight:bold;font-size:14px;color:#fff;text-shadow: 1px 1px 1px #000;}
.subNav:hover{color:#fff;}

.navContent{ 100%;display: none;}
.navContent li{ 198px;height:auto;  background-color:#fff;  border-left:solid 1px #cacacb;border-right:solid 1px #cacacb;}
.navContent li .smamun{ 188px; height:40px; padding-left:10px; font-size:14px; font-weight:bold; color:#3b64a4; line-height:40px;cursor:pointer;}
.navContent .btmline{ 200px; height:2px; background:url(../img/smenul.png) left bottom repeat-x;  background-color:none; border:none;}

.thrmenu{180px; height:56px; margin:0 auto; border-top:solid 1px #5a88cc;display: none;  }
.thrmenu li{ 50%; height:13px; float:left;  margin-top:10px; background-color:none; border:none; }
.thrmenu li a{ 90%; height:13px; float:left; background:url(../img/icon.png) -0px -256px no-repeat; padding-left:10%; display:block;  }
.thrmenu li a:hover{ color:#66b27d; background:url(../img/icon.png) -0px -242px no-repeat;}

js:

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".subNav").click(function(){ //
        //    $(this).toggleClass("currentDd").siblings(".subNav").removeClass("currentDd")
        //    $(this).toggleClass("currentDt").siblings(".subNav").removeClass("currentDt")
            
            // 修改数字控制速度， slideUp(500)控制卷起速度
            $(this).next(".navContent").slideToggle(500).siblings(".navContent").slideUp(500);
    }) 
})
</script>

知识点：

主要是JQUERY控制显示隐藏：

1.$(".subNav").click   一级菜单有好几个，用类标识一级菜单，那么怎么区分用户点的是哪个呢？

$(this).next(".navContent").slideToggle(500).siblings(".navContent").slideUp(500);

$(this) 表示了被用户点的那个。被点的那个一级菜单执行slideToggle(500)操作 。

.siblings(".navContent").slideUp(500);  后面是从被点的那个菜单开始历遍所有相同类菜单，，并执行关闭操作

2.toggleClass（）jQuery 属性操作  ：对设置或移除被选元素的一个或多个类进行切换。http://www.w3school.com.cn/jquery/attributes_toggleclass.asp

 3.三级菜单的显示隐藏：

onclick="$('#thr1').slideToggle(300);"  写在二级菜单上， slideToggle()，滑动函数的应用。

二。鼠标悬停图片文字动画效果

HTML：

<li><img src="img/1.png" />
                  
                       <div  class="pictit" >
                            <div class="nrone" style="display:block;">
                                 <div class="titsj"></div>
                                 <div class="titword">电访分析介绍</div>
                            
                             </div>
                             <div class="nrtwo" style="display:none;">
                                  <div class="desbt">定位分析介绍</div>
                                  <div class="desnr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍定们分析介绍</div>
                                  
                             </div>
                            
                       </div>

               </li>

CSS：

 .main .content .picbox{ 100%; height:auto;}
.main .content .picbox li{ 381px; height:312px; float:left; position:relative; margin-top:20px;}
.main .content .picbox li img{ 100%; height:100%;}
.rf{margin-left:20px;}
.main .content .picbox li .pictit{ 100%; height:52px;  background-color:#3a65a4;position:absolute; left:0; bottom:0; z-index:6;}
.main .content .picbox li .pictit .nrone .titsj{ 19px; height:13px; margin:0 auto; margin-top:6px; background:url(../img/icon.png) -0 -354px no-repeat;}
.main .content .picbox li .pictit .nrone .titword{ 100%; height:auto; margin-top:3px; font-size:16px; text-align:center; color:#fff;}

/*.main .content .picbox li .nrtwo{ 100%; height:100%; background-color:#3a65a4;position:absolute; left:0; top:0; z-index:5; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6;  opacity:0.6; }*/

.main .content .picbox li .nrtwo .desbt{ 100%; height:20px; text-align:center; color:#fff; margin-top:15px; font-size:16px;overflow:hidden; }
.main .content .picbox li .nrtwo .desnr{ 90%; height:90%; margin:0 auto; padding-top:20px; line-height:20px; font-size:14px; color:#fff; overflow:hidden;}
.qh{ 100%; height:100%;background-color:#3a65a4;}

js:

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(function(){
    $('.picbox li').hover(function(){
        $('.pictit',this).stop().animate({
            height:'312px'
        });
        
        $(".nrone",this).css('display','none');
        $(".nrtwo",this).css('display','block');
        
        $(".pictit",this).animate({ opacity:.6},200);
        
    },function(){
        $('.pictit',this).stop().animate({
            height:'52px'
        });
        
        
        $(".nrone",this).css('display','block');
        $(".nrtwo",this).css('display','none');
        $(".pictit",this).animate({ opacity:1},200);
    });
});
</script>

知识点：

1.整个函数的意思是鼠标悬停到LI上时（.hover）下面有两个函数，第一个是.pictit的高度变到最大，覆盖整个区域，，第二个则是相反，.pictit的高度变到最小

 $('.pictit',this).stop().animate({
            height:'312px'
        });

这是对DIV高度的控制函数：$('.pictit',this)最点到的那个DIV，用类来区分。

后面.stop().animate() 为什么这样写不是很明白，jQuery animate() 方法用于创建自定义动画。http://www.w3school.com.cn/jquery/jquery_animate.asp

2.$(".nrone",this).css('display','none'); 控制DIV的CSS的函数

3.$(".pictit",this).animate({ opacity:.6},200);  用.animate（）函数，控制DIV的透明度变化  

$(selector).animate({params},speed,callback);  
animate（）好强大的说

三，小技巧

这种的，可以直接在一个DIV里完成，小图标做成DIV的背景图。不用图片一个DIV，文字一个DIV。

<div class="wkstate notstate">未完成</div>

.wkstate{ auto; height:15px; float:right; margin-right:20px; margin-top:12px; padding-left:20px; line-height:15px;}
.notstate{ background:url(../img/icon.png) -0 -223px no-repeat; color:#bc393a;}