Heim  >  Artikel  >  Web-Frontend  >  ,这两个css如何实现_html/css_WEB-ITnose

,这两个css如何实现_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:47:461114Durchsuche

第一个是实现一个二级导航栏。
二级导航栏顶部还有一个一级导航栏,
当滑动条向下滑动时,一级导航栏逐渐消失,二级导航栏则一直固定在页面顶部。
当滑动条移动回页面顶部时,一级导航栏再出现。

第二个是在图片上实现毛玻璃效果。
类似于购买商品时,鼠标移动到图片上时,背景虚化。毛玻璃上提供一个立即购买的button。

如果不明白我说的内容,这个页面上有类似的实现效果
http://www.23mofang.com/

第一个好像需要配合jquery实现?我也不太清楚,至少页面上的css我没看出端倪。
如果有过使用经验,希望不吝赐教。当然,能提供一点帮助文档也非常感谢。


回复讨论(解决方案)

都是jQuery结合CSS来完成的
1. 二级导航栏,position:fixed; 相对浏览器窗口绝对定位。当滚动条位置大于一级导航栏高度时,让二级导航栏的top值变成0
2. jquery结合CSS3动画,通过mouseover、mouseout切换Class实现,不是毛玻璃效果,只是一个透明度为90%的白色背景层

都是jQuery结合CSS来完成的
1. 二级导航栏,position:fixed; 相对浏览器窗口绝对定位。当滚动条位置大于一级导航栏高度时,让二级导航栏的top值变成0
2. jquery结合CSS3动画,通过mouseover、mouseout切换Class实现,不是毛玻璃效果,只是一个透明度为90%的白色背景层



您好,我想详细询问一下第二个的一点问题,我发现背景层设置了颜色值之后

都是jQuery结合CSS来完成的
1. 二级导航栏,position:fixed; 相对浏览器窗口绝对定位。当滚动条位置大于一级导航栏高度时,让二级导航栏的top值变成0
2. jquery结合CSS3动画,通过mouseover、mouseout切换Class实现,不是毛玻璃效果,只是一个透明度为90%的白色背景层



实在非常感谢。
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn