发布时间: 2020-08-29
下载权限 白银或以上用户 分类 导航菜单
¥免费
立即下载 加入收藏
升级会员组 享受更多优惠
效果背景:
我无意中在网上看到了一个非常有创意的导航效果。虽然效果不是很酷,但也有点提神。
所以我模仿并写了一个最喜欢的童鞋来使用。
实施原则:
主要使用jQuery悬停和动画属性
默认情况下,每个li标记底部都有一个宽度为0的范围标记
当鼠标悬停在li上时,里面的跨度标签从中间向两边扩展,时间设置为0.2秒。
移除鼠标后,跨度宽度再次变为0
jQuery代码中有一个200的值,这意味着0.2秒。值越高,速度越慢。
用法:
1.将css样式引入您的网页
2.将正文中的代码部分复制到您需要的位置
分享链接 分享海报
上一篇: jQuery向下滚动页面后显示隐藏的导航栏
下一篇: 当网页被拉下时 顶部导航逐渐缩小并固定在顶部
暂无评论
云筝源码