龙岩网站建设亿网行普陀区网站建设公司

龙岩网站建设亿网行,普陀区网站建设公司,文创设计网站,自己想做个网站怎么做类的操作类CSS修改方式一#xff1a;box.style.width 300px;通过style属性来修改元素的样式#xff0c;每修改一个样式#xff0c;浏览器就需要重新渲染一次页面#xff0c;这样的执行的性能是比较差#xff0c;而且这种形式当我们要修改多个样式时#xff0…类的操作类CSS修改方式一box.style.width 300px;通过style属性来修改元素的样式每修改一个样式浏览器就需要重新渲染一次页面这样的执行的性能是比较差而且这种形式当我们要修改多个样式时也不太方便方式二box.className b2;我们可以通过修改元素的class属性来简介的修改样式这样一来我们只需要修改一次即可同时修改多个样式浏览器渲染页面一次性能比较好并且这种方式可以让表现和行为进一步分离。方式三提取方法//定义一个函数用来向一个元素中添加指定的class属性值 /* * 参数: * obj 要添加class属性的元素 * cn 要添加的class值 * */ function addClass(obj , cn){ //检查obj中是否含有cn if(!hasClass(obj , cn)){ obj.className cn; } } /* * 判断一个元素中是否含有指定的class属性值 * 如果有该class则返回true没有则返回false * */ function hasClass(obj , cn){ //判断obj中有没有cn class //创建一个正则表达式 //var reg /\bb2\b/; var reg new RegExp(\\bcn\\b); return reg.test(obj.className); } /* * 删除一个元素中的指定的class属性 */ function removeClass(obj , cn){ //创建一个正则表达式 var reg new RegExp(\\bcn\\b); //删除class obj.className obj.className.replace(reg , ); } /* * toggleClass可以用来切换一个类 * 如果元素中具有该类则删除 * 如果元素中没有该类则添加 */ function toggleClass(obj , cn){ //判断obj中是否含有cn if(hasClass(obj , cn)){ //有则删除 removeClass(obj , cn); }else{ //没有则添加 addClass(obj , cn); } }二级菜单-完成基本功能鼠标悬停式的二级菜单!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title鼠标悬停式二级菜单/title style * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body { font-family: Microsoft Yahei, sans-serif; background-color: #f5f5f5; } /* 导航栏容器 */ .nav { width: 100%; background-color: #333; } /* 一级菜单列表 */ .nav ul { display: flex; justify-content: center; width: 1200px; margin: 0 auto; } /* 一级菜单项 */ .nav-item { position: relative; padding: 0 20px; height: 50px; line-height: 50px; } .nav-item a { color: #fff; font-size: 16px; display: block; transition: color 0.3s; } .nav-item:hover a { color: #409eff; } /* 二级菜单容器 */ .submenu { position: absolute; top: 50px; left: 0; width: 150px; background-color: #fff; border: 1px solid #eee; border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 默认隐藏二级菜单 */ display: none; z-index: 999; } /* 二级菜单项 */ .submenu-item { padding: 0 15px; height: 40px; line-height: 40px; } .submenu-item a { color: #333; font-size: 14px; display: block; transition: background-color 0.3s, color 0.3s; } .submenu-item a:hover { background-color: #409eff; color: #fff; } /* 悬停一级菜单时显示二级菜单 */ .nav-item:hover .submenu { display: block; } /style /head body nav classnav ul li classnav-item a href#首页/a /li li classnav-item a href#产品中心/a !-- 二级菜单 -- ul classsubmenu li classsubmenu-itema href#产品1/a/li li classsubmenu-itema href#产品2/a/li li classsubmenu-itema href#产品3/a/li /ul /li li classnav-item a href#解决方案/a !-- 二级菜单 -- ul classsubmenu li classsubmenu-itema href#方案1/a/li li classsubmenu-itema href#方案2/a/li li classsubmenu-itema href#方案3/a/li li classsubmenu-itema href#方案4/a/li /ul /li li classnav-item a href#关于我们/a !-- 二级菜单 -- ul classsubmenu li classsubmenu-itema href#公司简介/a/li li classsubmenu-itema href#团队介绍/a/li li classsubmenu-itema href#联系方式/a/li /ul /li li classnav-item a href#联系我们/a /li /ul /nav script // 可选如果需要更精细的交互控制可通过JS增强比如处理快速悬停的延迟 const navItems document.querySelectorAll(.nav-item); let submenuTimer null; navItems.forEach(item { // 鼠标移入 item.addEventListener(mouseenter, () { clearTimeout(submenuTimer); const submenu item.querySelector(.submenu); if (submenu) submenu.style.display block; }); // 鼠标移出 item.addEventListener(mouseleave, () { submenuTimer setTimeout(() { const submenu item.querySelector(.submenu); if (submenu) submenu.style.display none; }, 200); // 延迟隐藏提升体验 }); }); /script /body /html二级菜单-过渡效果缩放过渡二级菜单!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title缩放过渡二级菜单/title style * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body { font-family: Microsoft Yahei, sans-serif; padding: 50px; background: #f5f5f5; } /* 菜单容器 */ .card-menu { width: 250px; background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden; } /* 一级菜单标题 */ .menu-header { padding: 20px; font-size: 18px; font-weight: bold; color: #2c3e50; cursor: pointer; border-bottom: 1px solid #eee; } /* 二级菜单容器 - 缩放过渡 */ .submenu { padding: 0 15px; /* 初始状态缩放透明 */ transform: scaleY(0); transform-origin: top; /* 从顶部开始缩放 */ opacity: 0; max-height: 0; overflow: hidden; transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; } /* 二级菜单项 */ .submenu-item { padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .submenu-item:last-child { border-bottom: none; } .submenu-item a { color: #666; font-size: 14px; transition: color 0.2s; } .submenu-item a:hover { color: #e74c3c; padding-left: 5px; } /* 激活时展开 */ .card-menu.active .submenu { transform: scaleY(1); opacity: 1; max-height: 500px; padding: 15px; } /style /head body div classcard-menu idcardMenu div classmenu-header idmenuHeader更多功能/div ul classsubmenu li classsubmenu-itema href#设置/a/li li classsubmenu-itema href#帮助中心/a/li li classsubmenu-itema href#反馈建议/a/li li classsubmenu-itema href#退出登录/a/li /ul /div script // 点击标题切换缩放效果 const cardMenu document.getElementById(cardMenu); const menuHeader document.getElementById(menuHeader); menuHeader.addEventListener(click, () { cardMenu.classList.toggle(active); }); /script /body /html