滨江软件公司
欢迎访问滨江软件开发公司(杭州滨兴科技股份有限公司)的官方网站!
主要功能
我们的网站具备以下主要功能:
导航菜单的展开和收起,通过点击
.menu_open
类的元素实现。当页面加载完成后,导航栏会自动展开到页面左侧,并隐藏在页面右侧的背景遮罩层之上。点击
.hcover
类的元素,导航栏会向左移动50%,同时背景遮罩层也会向左移动50%。同时,所有打开的导航项会关闭。点击
.nav_item i
类的元素,对应的导航项会展开或收缩。
代码示例
由于代码较为复杂,这里仅展示部分关键代码:
jQuery(".menu_open").click(function() {
jQuery(".nav").animate({ 'left': '0' },400);
jQuery(".hcover").animate({ 'right': '0' },400);
});
jQuery(".hcover").click(function() {
jQuery(this).animate({ 'right': '-50%' },400);
jQuery(".nav").animate({ 'left': '-50%' },400);
jQuery(".nav_ul").animate({ 'left': '0' },400);
jQuery('.nav_item_open').css('left', '-50%');
});
jQuery(".nav_item i").click(function() {
jQuery(".nav_ul").animate({ 'left': '+=' + jQuery(this).index() * 100 });
});
jQuery()
函数用于选择文档中的元素。.animate()
方法用于执行动画效果。例如,jQuery(".nav").animate({ 'left': '0' },400);
表示将.nav
元素的左侧位置设置为0px,动画持续时间为400毫秒。