倾斜的鼠标翻转导航制作上的烦恼
作者:小毅 来源:blueidea 发布时间:2007-06-20 16:39:00
小毅的blog:http://andymao.com/
前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了。我打开源文件看了一下,发现她根本没有掌握一个鼠标翻转的特性。并且对于倾斜导航的思考也不足。虽然我当时看出来了这些问题,但是由于手上一个项目正在收尾一时也没有时间向她一个讲解。正好昨天工作忙完了,现在又拿起那个文件看了一下,发现通过这个事件可以讲解好多个知识点,有一些地方比较容易让人不太注意,但是确实是非常关键的。下面我们通过制作一个倾斜的鼠标翻转导航为过程来针对不同的地方做出一些提示,希望可以帮助一些对于鼠标翻转导航制作上还存在疑问的朋友。
我们先看一下想要实现的效果,当然在没做之前这些只能是存在于我们的脑子或是草图上。我们首先要想到它是个什么样子,然后才能去分析我们想要实理的效果是应该如何去做,闲言少叙,先看图:
我们看到上图,可以会觉得好像并没什么,好像很容易做。好我们来细细的分析一下这个效果。我们用标准来实现就不能直接插入一张图片在HTML里。用标准来做就需要把图片作为背景的方式用CSS进行调用。那么我们来看一下这样的导航是否可以直接就那么直接调用,其中是不是还有什么问题出现?下面请看一下这个导航效果的放大图:
大家注意上图中的“危险区”很明显,如果我们把两个倾斜的正块放在一起就必然会有一段重复区,我们现在的CSS还不支持异形处理。要解决这个问题就必需要使得这两个方块进行重叠。重叠就需要把他们放在不同的层次上。这就要用到CSS中的定位:“position : static | absolute | fixed | relative ”。关于position的详细请查看苏昱的《CSS2中文手册》,关于如何定位请查看我的《解读absolute与relative》
做鼠标翻转我们通常会把所有的背景做成一个图,然后通过CSS来设置不同标签下的图片的不同位置。也许有人就会认为这个导航 的背景图应该是这样的:
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 401状态码的含义和处理401状态码的含义axios向服务器端发送请求时,有两种情况会出现401状态码(unauthorized未授权):1
- 最近有个需求,一个列表上下移动要有简单过渡效果,在网上找了找没找到,可能是我搜的关键词不对?试了试 Vue 的 transition-gro
- 本文实例总结了MySQL单表查询常见操作。分享给大家供大家参考,具体如下:创建fruits表:CREATE TABLE fruits( f_
- 本文实例讲述了Python实现的文本简单可逆加密算法。分享给大家供大家参考,具体如下:其实很简单,就是把一段文本每个字符都通过某种方式改变(
- 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好
- pandas DataFrame是二维的,所以,它既有列索引,又有行索引上一篇里只介绍了列索引:import pandas as pddf
- 假设红包金额为money,数量是num,并且红包金额money>=num*0.01原理如下,从1~money*100的数的集合中,随机
- 本文实例讲述了Python面向对象封装操作。分享给大家供大家参考,具体如下:目标封装小明爱跑步存放家具01. 封装封装 是面向对象编程的一大
- 我想大家在用Sql2005一般都是.NET2005自带的SQL Server 2005是SQL Server2005 Express版本的,
- 一、约束是什么约束就是,在创建表的时候,对表设置一些规则,只有满足这些规则,才可以插入数据,我们把这些规则叫做约束常见的约束有:约束类型规则
- 实际使用Pool 是用于存放临时对象的集合,这些对象是为了后续的使用,以达到复用对象的效果。其目的是缓解频繁创建对象造成的gc压力。在许多开
- 前言本篇来学习下柱状图的实现柱状图实现步骤ECharts 最基本的代码结构准备x轴的数据准备 y 轴的数据准备 option , 将 ser
- 前期准备及前情回顾#对于一维向量用np.arange生成以元组形式输出从0开始的数组([0, 1, 2, 3, 4, 5, 6, 7, 8,
- 1、监听视频滑动给 swiper 增加 @change="change",这个时间在我们完成一次滑动后执行,在 meth
- vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo所以下面介绍下,路由懒加载1、为什么要使
- 一、日志库选型需要和比较1.日志库选型需求日志性能不同日志级别可读性(包括日志采集、监控等)文件切割(不同维度分割)2.日志库比较记录一条消
- 一、引言在编写调试Python代码过程中,我们经常需要记录日志,通常我们会采用python自带的内置标准库logging,但是使用该库,配置
- 首先:文章用到的解析库介绍BeautifulSoup:Beautiful Soup提供一些简单的、python式的函数用来处理导航、搜索、修
- 一、对列表(list)进行排序推荐的排序方式是使用内建的sort()方法,速度最快而且属于稳定排序>>> a = [1,9
- 效果图最近帮朋友写个简单爬虫,顺便整理了下,搞成了一个带GUI界面的小说爬虫工具,用来从笔趣阁爬取小说。开发完成后的界面采集过程界面采集后存