解决倾斜鼠标翻转导航制作麻烦问题

本文中我们通过制作一个倾斜的鼠标翻转导航为例分析一下,希望可以帮助一些对于鼠标翻转导航制作上还存在疑问的朋友。

前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了。我打开源文件看了一下,发现作者根本没有掌握一个鼠标翻转的特性。并且对于倾斜导航的思考也不足。虽然我当时看出来了这些问题,但是由于手上一个项目正在收尾一时也没有时间向她一个讲解。正好昨天工作忙完了,现在又拿起那个文件看了一下,发现通过这个事件可以讲解好多个知识点,有一些地方比较容易让人不太注意,但是确实是非常关键的。

我们先看一下想要实现的效果,当然在没做之前这些只能是存在于我们的脑子或是草图上。我们首先要想到它是个什么样子,然后才能去分析我们想要实理的效果是应该如何去做,闲言少叙,先看图:

我们看到上图,可以会觉得好像并没什么,好像很容易做。好我们来细细的分析一下这个效果。我们用标准来实现就不能直接插入一张图片在HTML里。用标准来做就需要把图片作为背景的方式用CSS进行调用。那么我们来看一下这样的导航是否可以直接就那么直接调用,其中是不是还有什么问题出现?下面请看一下这个导航效果的放大图:

大家注意上图中的“危险区”很明显,如果我们把两个倾斜的正块放在一起就必然会有一段重复区,我们现在的CSS还不支持异形处理。要解决这个问题就必需要使得这两个方块进行重叠。重叠就需要把他们放在不同的层次上。这就要用到CSS中的定位:“position : static | absolute | fixed | relative ”。

做鼠标翻转我们通常会把所有的背景做成一个图,然后通过CSS来设置不同标签下的图片的不同位置。也许有人就会认为这个导航的背景图应该是这样的:

如果你真的是这么想的那么问题就出来了:当在五个区块中的任一个区块中进行鼠标翻转时,上面的危险区的重复部位就会把左侧和是右侧的导航挡去一个角。所以正常的方式是:

只有这样在没有危险区的情况下才能作为最终的背景图片使用。当然还要注意的是背景并不是白色而是透明的,主要不是为了与网站的背景融合,关键是不要挡住在危险区的相邻的背景。我使用的是GIF图,GIF图有透明的时候边缘会有一点毛边。如果希望应对不同的色彩的网站背景,最好使用PNG或是把GIF图的边缘做成点像素。

对于这个背景图的思考完成之后我们就需要想想怎么制作这个导航了。先来分析一下这个鼠标翻转,原来做鼠标翻转是JS的事,现在可以通过CSS的:hover也可以实现这个翻转效果,代码少、结构清晰。所以这里这五个导航的翻转就是由A:hover来实现。

时间: 2024-10-03 17:49:50

解决倾斜鼠标翻转导航制作麻烦问题的相关文章

网页设计中解决倾斜鼠标翻转导航制作麻烦问题

   本文中我们通过制作一个倾斜的鼠标翻转导航为例分析一下,希望可以帮助一些对于鼠标翻转导航制作上还存在疑问的朋友. 前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了.我打开源文件看了一下,发现作者根本没有掌握一个鼠标翻转的特性.并且对于倾斜导航的思考也不足.虽然我当时看出来了这些问题,但是由于手上一个项目正在收尾一时也没有时间向她一个讲解.正好昨天工作忙完了,现在又拿起那个文件看了一下,发现通过这个事件可以讲解好多个知识点,有一些地方比较容易让人不太注意,但是确实是非常关键的

倾斜的鼠标翻转导航制作上的烦恼

前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了.我打开源文件看了一下,发现她根本没有掌握一个鼠标翻转的特性.并且对于倾斜导航的思考也不足.虽然我当时看出来了这些问题,但是由于手上一个项目正在收尾一时也没有时间向她一个讲解.正好昨天工作忙完了,现在又拿起那个文件看了一下,发现能过这个事件可以讲解好多个知识点,有一些地方比较容易让人不太注意,但是确实是非常关键的.下面我们通过制作一个倾斜的鼠标翻转导航为过程来针对不同的地方做出一些提示,希望可以帮助一些对于鼠标翻转导航制作上还存在

倾斜鼠标翻转导航的问题研究

本文中我们通过制作一个倾斜的鼠标翻转导航为例分析一下,希望可以帮助一些对于鼠标翻转导航制作上还存在疑问的朋友. 前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了.我打开源文件看了一下,发现作者根本没有掌握一个鼠标翻转的特性.并且对于倾斜导航的思考也不足.虽然我当时看出来了这些问题,但是由于手上一个项目正在收尾一时也没有时间向她一个讲解.正好昨天工作忙完了,现在又拿起那个文件看了一下,发现通过这个事件可以讲解好多个知识点,有一些地方比较容易让人不太注意,但是确实是非常关键的. 我

jquery简单实现鼠标经过导航条改变背景图

 鼠标经过导航条改变背景图的效果很是好看,下面为大家介绍下使用jquery是如何实现的,感兴趣的朋友可以参考下 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(22)-权限管理系统-模块导航制作

原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(22)-权限管理系统-模块导航制作 最近比较忙,系统难度独步增加,文章的发布速度明显比以前慢了. 由于我们已经跑通了整个系统,所有东西都回到了简单,接下来我们做模块制作也就是操作SysModule表. 首先我们来回顾一下之前的难点主要就是SysRight这个表Rightflag字段的改变,这个字段关系导航与角色组的关系显示(即有权限时候显示菜单导航,这个更新讲到授权讲到,在这里浮头一下) 所以我们操作S

jquery背景跟随鼠标滑动导航_jquery

本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>左边跟随鼠标滑动导航</title> <meta name="keywords"

Flash动态缓冲图片导航制作详解

导航|动态|详解 缓冲公式在制作特效中非常有用,著名的三星导航菜单就用到了此公式.现在许多网站出尽风头,其中缓冲导航是其一大亮点.本文以一德国网站的导航为例,详解缓冲导航的制作.这个效果是我和溶剂共同完成的,他提供坐标的算法,我提供缩放的算法. 本例效果演示 鼠标划过的部分图片会变大 制作思路 图片缩放控制利用缓冲公式设置图片的缩放比例,如果鼠标滑过某图片,放大1.8倍.如果其它图片的序号与此图片的序号相差1,就是此图片两边的图片,放大1.4倍,其它的为原始大小. 图片坐标控制当某图片放大时,相

解决 FireFox 下[使用event很麻烦] 的问题._javascript技巧

在FireFox下编写事件处理函数是很麻烦的事. 因为FireFox并没有 window.event . 如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event. 所以为了兼容IE与FireFox,一般的事件处理方法为: btn.onclick=handle_btn_click; function handle_btn_click(evt) {     if(evt==null)evt=window.event;//IE     //处理事件. } 对于简单的程序,这不算

完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题_jquery

如果用slideToggle,鼠标快速滑过后,滑进滑出很多次,要解决这个问题,用stop(false,true) $(".Nav_L").hover(function () { $(".Cate2").stop(false,true).slideToggle(500); });