公司后台切图

一.三级菜单的切图

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

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

.thrmenu{width:180px; height:56px; margin:0 auto; border-top:solid 1px #5a88cc;display: none;  }
.thrmenu li{ width:50%; height:13px; float:left;  margin-top:10px; background-color:none; border:none; }
.thrmenu li a{ width: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{ width:100%; height:auto;}
.main .content .picbox li{ width:381px; height:312px; float:left; position:relative; margin-top:20px;}
.main .content .picbox li img{ width:100%; height:100%;}
.rf{margin-left:20px;}
.main .content .picbox li .pictit{ width:100%; height:52px;  background-color:#3a65a4;position:absolute; left:0; bottom:0; z-index:6;}
.main .content .picbox li .pictit .nrone .titsj{ width: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{ width:100%; height:auto; margin-top:3px; font-size:16px; text-align:center; color:#fff;}

/*.main .content .picbox li .nrtwo{ width: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{ width:100%; height:20px; text-align:center; color:#fff; margin-top:15px; font-size:16px;overflow:hidden; }
.main .content .picbox li .nrtwo .desnr{ width:90%; height:90%; margin:0 auto; padding-top:20px; line-height:20px; font-size:14px; color:#fff; overflow:hidden;}
.qh{ width: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{ width: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;}

时间： 2024-11-25 06:26:44

公司后台切图的相关文章

后台切图

JS: <script src="js/jquery-1.7.1.js" type="text/javascript"></script><script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 一. 功能描述:点右边的垃圾桶图标,左边的多行输入框内容被清空,,,支持页面中多个这样的功能 HTML:

一款APP从设计稿到切图过程全方位揭秘 Mark

纯干货!一款APP从设计稿到切图过程全方位揭秘 @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为尺寸

CSS网页切图实例教程下

CSS网页切图实例教程下 7.导航的制作,是一个典型的ULLI列表.我们先写出HTML代码,而在我们导航列表之间有一个竖线隔开. <ul> <li><a href="#">divcss8.com首页</a>|</li> <li><a href="#">关于捷福</a>|</li> <li><a href="#">产品

WebGIS中矢量切图的初步研究

1.背景 在GIS领域,金字塔技术一直是一个基础性技术,WMTS规范专门制定了针对切片请求的格式.利用这种技术,前端可以快速展示出指定级别的地图或影像. 但是,由于切图本身是一张图片,图片上看似是兴趣点的要素根本无法进行前端交互.于是,针对兴趣点等矢量数据的展示,基本原理都是先获取到矢量的地理信息(比如GeoJson),在前端绘制(内核为一个element),于是该element便能进行鼠标响应等交互了. 2.矢量数据的一般展示方法 2.1 矢量数据按需请求 根据需要,每次向服务器(比如根据地理

ps切图详解-web前端（转）

网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选项设置 编辑->首选项->单位与标尺,选改为像素. 1.2 面板 在"窗口"菜单下开启: 工具(默认已开启) 选项(默认已开启) 图层(默认已开启)

利用PS自动切图、支持svg且支持icoMoon——再也不用四处去转格式了

今天想导出svg格式的图片支持webFont,结果AI打不开了,文件好像损坏了,于是就想办法在PS里面导出. 网上搜索到一篇文章,腾讯的 http://isux.tencent.com/ps-photoshop-cc-fd.html, 同时还会引用到一个三方脚本  http://hackingui.com/design/export-photoshop-layer-to-svg/ , 三方脚本的一篇文章 http://www.ui.cn/detail/53284.html. 最终找到了解决办法,

psd切图转换为div+css格式

先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY,里面所用到的HTML标记进行重置为0 PSD转div css网页切图示例 第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在根据BODY中所使用的标记进行重置.如:我们BODY标记中使用了,div,p那我们的选择符就写 body,div,p就可以了.不需要写*了. 复制代码 代码如下: *{ margin:0px; padding:

什么是CSS网页切图

经常有人问我CSS网页切图是什么东东.在这里详细给大家解答一下 在说CSS网页切图之前,我先给大家说一下一般制作一个网站需要步骤 一.网页设计人员会根据客户要求在PS中设计出网页效果图,这个效果图一般会存储为PSD格式 二.网页前台人员需要根据设计师所出的效果图(PSD文件)进行切图. 三.程序人员会根据网页前台人员所提供网页进行程序的制作. 那也就是在网站制作第二步我们会用到CSS网页切图.其实说白了就是把一个图片转成网页的过程.因为设计人员所出网页效果图是没有链接.是不能直接供后台人员使用的

手把手教你使用PS切图

在IT公司中一般都是一个UI设计师对应多个程序员,所以有时候UI设计师有点忙不过来,但是我们也不能干等着,所以这时候就需要自己动手,丰衣足食了,下面就来介绍一下如何使用PS进行切图,不过Android中还有.9图片的概念,所以这里还需要介绍一下如何制作.9图片,关于.9图片的知识转战:http://blog.csdn.net/jiangwei0910410003/article/details/16986079 这里就以一张demo.psd图片作为案例: 这里通过三个例子来进行演示 第一.把中间