原生js实现导航条动画

原生js实现毛毛虫导航

直接上代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {position: relative;width: 700px;margin: 100px auto;padding: 20px;display: flex;justify-content: space-around;border: 1px solid aqua;}ul>li {list-style: none;}p {position: absolute;width: 40px;height: 6px;background: red;border-radius: 12px;bottom: 0;left: 0;}</style></head><body><ul><li>加油骚年</li><li>头脑清楚</li><li>每天学习js巩固</li><li>js永远的神</li><li>太喜欢js了</li><li>敲js代码使自己快乐</li><p></p></ul></body>
</html><script type="text/javascript">var li = document.querySelectorAll('li')var p = document.querySelectorAll('p')//点击改变for (var i = 0; i < li.length; i++) {li[i].addEventListener('click', function(e) {p[0].style.left = (this.offsetLeft + this.offsetWidth / 2 - p[0].offsetWidth / 2) + 'px' //计算滑块位置//点击获取当前li的位置然后赋值给下面滑块p[0].style.transition = 'all 0.3s'//设置过渡动画效果})}//首次加载让滑块去第一个li下面(function fn() {p[0].style.left = (li[0].offsetLeft + li[0].offsetWidth / 2 - p[0].offsetWidth / 2) + 'px'})()
</script>

原生js实现导航条动画相关推荐

原生JS实现网页烟花动画效果——前端工程师必备技能！
原生js实现放烟花效果,点击鼠标,然后向四周扩散,最后自由落体效果!最简单的方法实现! CSS代码: [html] view plain copy *{ padding: 0px; margin: 0 ...
html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示代码结构 1. 引入JS 2. HTML代码 varying v ...
html导航栏悬停过渡,JS 实现导航栏悬停效果
JS-实现导航栏悬停先布个局: Test 1 tab1 tab2 tab3 tab4 2 3 4 5 6 7 添加简单的样式: div.main{ width: 800px; background: ...
原生JS实现特效导航条
分享一个用原生JS实现的特效导航条,效果如下: 实现代码如下: <!DOCTYPE html><head><meta charset="utf-8" ...
【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
animate用法 js原生_animate动画、原生JS实现轮播图
写在前面最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...
php侧边栏导航效果,原生js实现电商侧边导航效果
知识要点实现原理: 1.点击楼层跳相应楼层,用的是锚点定位电梯:2F 个护家清列表title: 这个没什么好说的 2.当点击楼层跳到相应楼层时,该楼层高亮显示我们的脚本主要就是实现这个功能. ...
js动画与html动画效果,九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画 ...
js实现网页左侧导航条,鼠标经过显示隐藏的面板
js实现网页左侧导航条,鼠标经过显示隐藏的面板 <style>* {margin: 0;padding: 0;}#left_nav {position: relative;border: ...

原生js实现导航条动画

原生js实现毛毛虫导航

原生js实现导航条动画相关推荐

最新文章

热门文章