以文本方式查看主题 - 中文XML论坛 - 专业的XML技术讨论区 (http://bbs.xml.org.cn/index.asp) -- 『 灌水天堂 』 (http://bbs.xml.org.cn/list.asp?boardid=26) ---- 一种细腻的导航效果的制作方法 (http://bbs.xml.org.cn/dispbbs.asp?boardid=26&rootid=&id=9447) |
-- 作者:卷积内核 -- 发布时间:8/19/2004 10:49:00 AM -- 一种细腻的导航效果的制作方法 -------------------------------------------------------------------------------- 一般的导航效果大家都很熟悉了,例如用CSS给导航文本设置上、下划线、背景颜色或位移等。前面的帖子中有网友提到http://www.tonta.com.cn/这个网站,偶发现其首页中的导航效果不错,虽然flash做的没有很眩的效果,但是比较细腻,看上去很舒服。 闲来无事,尝试在dw中实现同样的导航效果。效果如下所示:http://vip.5d.cn/flood/daohang/1.htm。 首先分析效果的组成,鼠标经过时背景发生变化,小图象转动。Ok!考虑使用dw中的swap image(翻转图)+背景图象变化(CSS定义)应该可以实现效果。 准备4张gif图象分别为: 鼠标经过时的背景图象(在fw中使用animate可以很简单的实现渐变效果,本图象透明度由0%渐变到100%) 鼠标划出时的背景图象(本图象透明度由100%渐变到0%) 动态小图象 静止小图象(在fw中设置图象格式为gif后保存即可) .style1 { background-image: url(bg.gif)}.style2 { background-image: url(b.gif)} 分别用于鼠标经过和划出时的背景图象 onmouseover="this.className='style1'" onmouseout="this.className='style2'" 就可以实现鼠标经过时背景渐变出现,移开后背景渐变消失的效果。 onMouseOver="MM_swapImage('Image2','','2.GIF',1)" onMouseOut="MM_swapImgRestore()" 粘贴到单元格代码td标签中。 onMouseOver="MM_swapImage('Image3','','2.GIF',1)"<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3"> 修改翻转图的name为不同的值即可。 |
W 3 C h i n a ( since 2003 ) 旗 下 站 点 苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》 |
1,902.344ms |