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

日期：2008年2月22日作者：查看:[大字体中字体小字体]

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

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

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

　　

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

　　

　　

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

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

　　

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

　　

　　

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

　　对于这个背景图的思考完成之后我们就需要想想怎么制作这个导航了。先来分析一下这个鼠标翻转，原来做鼠标翻转是JS的事，现在可以通过CSS的：hover也可以实现这个翻转效果，代码少、结构清晰。所以这里这五个导航的翻转就是由A:hover来实现。
（出处：http://www.hackhome.com/）
解决倾斜鼠标翻转导航制作麻烦问题相关文章：
·破解QQ空间相册密码
·《真三国无双4》系统解剖和攻略(ps2) - 真三国无双4攻略秘籍 - 真三国无双4
·密码破解简介
·成功解决微软正版验证通知问题的方法
·魔法门7 攻略解析
·无线攻防：破解WEP密钥过程全解
·河南网通宽带共享:破解河南网通宽带共享完全版
·PPS网络电视播放器常见问题解答
·教你学习如何破解XP登陆密码
·主板各部分图解
解决倾斜鼠标翻转导航制作麻烦问题相关软件
·《杀手3:契约》v1.74升级档破解版免CD补丁
·《魔戒:中土大战》完美解除自爆问题补丁
·杀手3:契约完美破解版
·骑马与砍杀完美解密中文版0808版
·手机解锁 V8.01
·多功能密码破解软件 V4.5
·加速工具时空游侠V1.5破解版
·阿飛Real解码器 Realpack 20070103
·1400多篇各类破解文章全中文
·终极解码 V1.7.0408 简体中文版

上一篇:Word快捷键手册：图形及其它对象的快捷键

下一篇:特效更好 Windows 7系统最新截图欣赏

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

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

精品推荐

热点TOP10

特别推荐