重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
一.使用js实现导航行栏,点击时,下划线会跟着鼠标的点击移动。
成都创新互联是一家专业提供双滦企业网站建设,专注与成都做网站、成都网站制作、H5响应式网站、小程序制作等业务。10年已为双滦众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。html代码如下:
123
css代码如下:
*{ margin:0; padding:0; } body{ background: url("./img/wallhaven1.png"); } .item{ width: 100px; height: 30px; margin-bottom: 5px; margin-left: 5px; padding: 5px 10px; background: #B89C9B; text-align: center; line-height: 30px; color:white; border-radius: 10px; } #line{ color:red; width: 4px; height: 40px; background: red; position: absolute; top:0px; padding-right: 1px; }
js代码如下:
效果图:
默认时,红色横线在1标签处,点击2时,红色标签,会根据移动函数进行移动,如图(2)
二.在此基础上,根据css3来实现横线的过度平滑效果。
html代码如下:
css代码如下:
.item1{ width: 100px; height: 30px; margin-bottom: 5px; margin-left: 5px; padding: 5px 10px; background: #1E293B; float:left; text-decoration:none; color:white; line-height: 30px; border-radius: 10px; } #line1{ color:red; width: 120px; height: 2px; background: red; position: absolute; top:175px; left:5px; padding-top: 1px; } #nav2{ list-style-type: none; } #nav2 a{ display: block; text-decoration:none; color:white; } #nav2 a:hover{ background-color: #1E291a; color:red; } #pic{ margin-top:80px; margin-left: 10px; } img{ width: 200px; height:200px; border-radius: 15px; } .effect0{ transform: translateX(1px); transition:all 2s; } .effect{ transform: translateX(125px); transition:all 2s; } .effect2{ transform: translateX(250px); transition:all 2s; } .effect3{ transform: translateX(375px); transition:all 2s; } .effect4{ transform: translateX(500px); transition:all 2s; } .piceffect{ transform: translateX(600px) scale(1.5); transition: all 2s; }
js代码如下:
var nav2 = document.getElementById('nav2'); var pic = document.getElementById('pic'); nav2.addEventListener("click",move,false); function move(event){ var event=event||window.event; var target=event.target||event.srcElement;; switch(target.id){ case "id11": line1.className = "effect0"; pic.className = "effect0"; break; case "id21": line1.className = "effect"; pic.className = "effect"; break; case "id31": line1.className = "effect2"; pic.className = "effect2"; break; case "id41": line1.className = "effect3"; pic.className = "effect3"; break; case "id51": line1.className = "effect4"; pic.className = "effect4"; break; } } pic.addEventListener("click",showbig,false); function showbig(){ pic.className="piceffect"; }
效果图:
当鼠标没有点击标签时,横线默认是在第一个标签下,如图:
当点击任何一个标签,下划线和图片就会平滑的过度到点击的那个标签下,如图:
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。