元素偏移量offset系列
动态获取元素位置，大小等。
获取元素距离带有定位父元素的位置 否则返回的是body
获得元素自身的大小 高度和宽度 是包含padding+border+width
注意：返回的数值都不带单位
获取鼠标在盒子的位置
<style> .box { width: 300px; height: 300px; background-color: pink; margin: 200px; } </style> </head> <body> <div class="box"></div> <script> //我们在盒子内点击，想要得到鼠标距离盒子左右的距离 //首先得到鼠标在页面中的坐标（e.pageX,e.pageY） //其次得到盒子在页面中的距离（box.offsetLeft,box.offsetTop） //用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标 var box = document.querySelector('.box'); box.addEventListener('mousemove', function (e) { /* console.log(e.pageX); console.log(e.pageY); console.log(box.offsetLeft); console.log(box.offsetTop); */ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; this.innerHTML = 'x坐标是' + x + 'y坐标是' + y; }) </script> </body> </html>
元素可视区client系列
立即执行函数(function(){})() ：主要作用创建一个独立的作用域
<script> //1.立即执行函数：不需要调用，立马能够自己执行的函数 function fn() { console.log(1); } fn(); //2.写法 也可以传递参数进来 //(function () { })() 或者(function () { }()); (function () { console.log(2); })() //第二个小括号可以看做是调用函数 //3.立即执行函数最大的作用就是 独立创建了一个作用域，里面所有的变量都是局部变量 不会有命名冲突的情况 </script> (function flexible(window, document) { //获取的html 的根元素 var docEl = document.documentElement //dpr 物理像素比 var dpr = window.devicePixelRatio || 1 //adjust body font size function setBodyFontSize() { //如果页面中有body 这个元素 就设置body的字体大小 if (document.body) { document.body.styl.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); //set 1rem = viewWidth /10 设置我们html 元素的文字大小 function setRemUnit() { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() //reset rem unit on page resize 当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小 window.addEventListener('resize', setRemUnit) //pageshow 是我们重新加载页面触发的事件 window.addEventListener('pageshow', function (e) { //e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小 if (e.persisted) { setRemUnit() } }) //detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法 if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(textElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } })(window, document)
元素滚动scroll系列
<style> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: pink; } .w { width: 1200px; margin: 10px auto; } .header { height: 150px; background-color: purple; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } </style> </head> <body> <div class="slider-bar"> <span class="goBack">返回顶部</span> </div> <div class="header w">头部区域</div> <div class="banner w">banner区域</div> <div class="main w">主体部分</div> <script> //1.获取元素 var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); //banner.offsetTop 就是被卷去头部的大小 一定要写到滚动的外面 var bannerTop = banner.offsetTop //当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop - bannerTop; //获取main 主体元素 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; //2.页面滚动事件 scroll document.addEventListener('scroll', function () { // console.log(11); //window.pageYOffset 页面被卷去的头部 //console.log(window.pageYOffset); //3. 当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } //4.当我们页面滚动到main盒子，就显示 goback模块 if (window.pageYOffset >= mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }) </script> </body>三大系列比较
offset系列经常用于获取元素位置 offsetLeft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
scroll经常用于获取滚动距离scrollTop scrollLeft
注意页面滚动的距离通过window.pageXoffset 获得
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发
mouseleave同样不会冒泡
动画函数封装
核心原理：通过定时器setInterval（）不断移动盒子位置
实现步骤：
1.获得盒子当前位置
2.让盒子在当前位置加上1个移动距离
3.利用定时器不断重复这个操作
4.加一个结束定时器的条件
5.注意此元素需要添加定位，才能使用element.style.left
<style> div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } span { position: absolute; left: 0; top: 200px; display: block; width: 150px; height: 150px; background-color: purple; } </style> </head> <body> <button>西御河点击事件</button> <div></div> <span>西御河</span> <script> //var obj={}; //obj.name='andy'; //简单动画函数封装 obj目标对象 target目标位置 //给不同的元素指定了不同的定时器 function animate(obj, target) { //当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多定时器 //解决方案就是 让我们元素只有一个定时器执行 //先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function () { if (obj.offsetLeft >= target) { //停止动画 本质是停止定时器 clearInterval(obj.timer); } obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); } var div = document.querySelector('div'); var span = document.querySelector('span'); var btn = document.querySelector('button'); //调用函数 animate(div, 300); btn.addEventListener('click', function () { animate(span, 200); }) </script> </body>缓动效果原理
就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1.让盒子每次移动距离慢慢变小，速度就会慢慢落下来
2.核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长
3.停止的条件是：让当前盒子位置等于目标位置就停止定时器
<body> <button class="btn500">西御河点击到500</button> <button class="btn800">西御河点击到800</button> <span>西御河</span> <script> //缓动动画函数封装 obj目标对象 target目标位置 //思路： // 1.让盒子每次移动距离慢慢变小，速度就会慢慢落下来 // 2.核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长 // 3.停止的条件是：让当前盒子位置等于目标位置就停止定时器 function animate(obj, target) { //先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function () { //步长值写到定时器的里面 //把我们步长值改为整数 不要出现小数的问题 //var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { //停止动画 本质是停止定时器 clearInterval(obj.timer); } //把每次加1 这个步长值改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/10 obj.style.left = obj.offsetLeft + step + 'px'; }, 30); } var span = document.querySelector('span'); var btn500 = document.querySelector('.btn500'); var btn800 = document.querySelector('.btn800'); //调用函数 btn500.addEventListener('click', function () { animate(span, 500); }) btn800.addEventListener('click', function () { animate(span, 800); }) //匀速动画 就是 盒子是当前的位置 + 固定的值 10 //缓动动画就是 盒子当前的位置 + 变化的值（（目标值-现在的位置）/10） </script> </body>动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
回调函数写的位置：定时器结束的位置
<body> <button class="btn500">西御河点击到500</button> <button class="btn800">西御河点击到800</button> <span>西御河</span> <script> //缓动动画函数封装 obj目标对象 target目标位置 //思路： // 1.让盒子每次移动距离慢慢变小，速度就会慢慢落下来 // 2.核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长 // 3.停止的条件是：让当前盒子位置等于目标位置就停止定时器 function animate(obj, target, callback) { //console.log(callback); callback = function () { } 调用的时候 callback() //先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function () { //步长值写到定时器的里面 //把我们步长值改为整数 不要出现小数的问题 //var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { //停止动画 本质是停止定时器 clearInterval(obj.timer); //回调函数写到定时器结束里面 if (callback) { //调用函数 callback(); } } //把每次加1 这个步长值改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/10 obj.style.left = obj.offsetLeft + step + 'px'; }, 30); } var span = document.querySelector('span'); var btn500 = document.querySelector('.btn500'); var btn800 = document.querySelector('.btn800'); //调用函数 btn500.addEventListener('click', function () { animate(span, 500); }) btn800.addEventListener('click', function () { animate(span, 800, function () { //alert('hello'); span.style.backgroundColor = 'red'; }); }) //匀速动画 就是 盒子是当前的位置 + 固定的值 10 //缓动动画就是 盒子当前的位置 + 变化的值（（目标值-现在的位置）/10） </script> </body>引用animate动画函数
<script src="animate.js"></script> </head> <body> <div class="sliderbar"> <span>⬅</span> <div class="con">问题反馈</div> </div> <script> //1.获取元素 var sliderbar = document.querySelector('.sliderbar'); var con = document.querySelector('.con'); //当我们鼠标经过 sliderbar 就会让con这个盒子滑动到左侧 //当我们鼠标离开 sliderbar 就会让con这个盒子滑动到右侧 sliderbar.addEventListener('mouseenter', function () { //animate(obj,target,cllback); animate(con, -160, function () { //当我们动画执行完毕，就把 ⬅ 改为 ➡ sliderbar.children[0].innerHTML = '➡'; }); }) sliderbar.addEventListener('mouseleave', function () { //animate(obj,target,cllback); animate(con, 0, function () { sliderbar.children[0].innerHTML = '⬅'; }); }) </script> </body>
常见网页特效案例
网页轮播图
功能需求：
1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
2.点击右侧按钮一次，图片往左播放一次，以此类推，左侧按钮同理
3.图片播放的同时，下面小圆圈模块也跟随一起变化
4.点击小圆圈，可以播放相应图片
5.鼠标不经过轮播图，轮播图也会自动播放图片
6.鼠标经过，轮播图模块，自动播放停止
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .main { width: 980px; height: 455px; margin-left: 219px; margin-top: 10px; } .focus { position: relative; width: 720px; height: 455px; background-color: purple; overflow: hidden; } .focus ul { position: absolute; top: 0; left: 0; width: 600%; } .focus ul li { float: left; } .arrow-l, .arrow-r { display: none; position: absolute; top: 50%; margin-top: -20px; width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; z-index: 2; } .arrow-r { right: 0; } img { width: 720px; height: 455px; } </style> <!--这个animate.js 必须写到 index.js的上面引用--> <script src="js/animate.js"></script> <!--引入我们首页的js文件--> <script src="js/index.js"></script> </head> <body> <div class="w"> <div class="main"> <div class="focus f1"> <!--左侧按钮--> <a href="#" class="arrow-l"> < </a> <!--右侧按钮--> <a href="#" class="arrow-r"> < </a> <!--核心的滚动区域--> <ul> <li> <a href="#"><img src="images/1.jpg" alt=""></a> </li> <li> <a href="#"><img src="images/2.jpg" alt=""></a> </li> <li> <a href="#"><img src="images/3.jpg" alt=""></a> </li> <li> <a href="#"><img src="images/4.jpg" alt=""></a> </li> </ul> <!--小圆圈--> <ol class="circle"> </ol> </div> </div> </div> </body> </html> window.addEventListener('load', function () { //1.获取元素 var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); var focus = document.querySelector('.focus'); var focusWidth = focus.offsetWidth; //2.鼠标经过focus 就显示隐藏左右按钮 focus.addEventListener('mouseenter', function () { arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; clearInterval(timer); timer = null;//清除定时器变量 }); focus.addEventListener('mouseleave', function () { arrow_l.style.display = 'none'; arrow_r.style.display = 'none'; timer = setInterval(function () { //手动调用点击事件 arrow_r.click(); }, 2000); }); //3.动态生成小圆圈 有几张图，我就生成几个小圆圈 var ul = focus.querySelector('ul'); var ol = focus.querySelector('.circle'); //console.log(ul.children.length); for (var i = 0; i < ul.children.length; i++) { //创建一个小li var li = document.createElement('li'); //记录当前小圆圈的索引号 通过自定义属性来做 li.setAttribute('index', i); //把小li插入到ol里面 ol.appendChild(li); //4.小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件 li.addEventListener('click', function () { //干掉所有人 把所有的小li 清除 current 类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } //留下我自己 当前的小li 设置current 类名 this.className = 'current'; //5.点击小圆圈，移动图片 当然移动的是 ul //ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 //当我们点击了某个小li 就拿到当前小li 的索引号 var index = this.getAttribute('index'); //当我们点击了某个小li 就要把这个li 的索引号给 num num = index; //当我们点击了某个小li 就要把这个li 的索引号 给 circle circle = index; console.log(focusWidth); console.log(index); animate(ul, -index * focusWidth); }) } //把ol里面的第一个小li设置类名为 current ol.children[0].className = 'current'; //6.克隆第一张图片（li）放到ul 最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); //7. 点击右侧按钮 图片滚动一张 var num = 0; //circle 控制小圆圈的播放 var circle = 0; arrow_r.addEventListener('click', function () { //如果走到了最后复制的一张图片， 此时 我们的ul 要快速复原 left 改为 0 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth); //8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle++; //如果circle==4 说明走到最后我们克隆的这张图片了 我们就复原 if (circle == ol.children.length) { circle = 0; } circleChange(); }); //9.左侧按钮做法 arrow_l.addEventListener('click', function () { //如果走到了最后复制的一张图片， 此时 我们的ul 要快速复原 left 改为 0 if (num == 0) { num = ul.children.length - 1; ul.style.left = num * focusWidth + 'px'; } num--; animate(ul, -num * focusWidth); //8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle--; //如果circle<0 说明第一张图片，则小圆圈要改为第四个小圆圈（3） // if (circle < 0) { // circle = ol.children.length - 1; // } circle = circle < 0 ? ol.children.length - 1 : circle; circleChange(); }); function circleChange() { //先清除其余小圆圈的current类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } //留下当前的小圆圈的current类名 ol.children[circle].className = 'current'; } //10.自动播放轮播图 类似右侧按钮 把手动改为自动 var timer = setInterval(function () { //手动调用点击事件 arrow_r.click(); }, 2000); })
节流阀
防止轮播图按钮连续点击造成播放过快
目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数
window.addEventListener('load', function () { //1.获取元素 var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); var focus = document.querySelector('.focus'); var focusWidth = focus.offsetWidth; //2.鼠标经过focus 就显示隐藏左右按钮 focus.addEventListener('mouseenter', function () { arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; clearInterval(timer); timer = null;//清除定时器变量 }); focus.addEventListener('mouseleave', function () { arrow_l.style.display = 'none'; arrow_r.style.display = 'none'; timer = setInterval(function () { //手动调用点击事件 arrow_r.click(); }, 2000); }); //3.动态生成小圆圈 有几张图，我就生成几个小圆圈 var ul = focus.querySelector('ul'); var ol = focus.querySelector('.circle'); //console.log(ul.children.length); for (var i = 0; i < ul.children.length; i++) { //创建一个小li var li = document.createElement('li'); //记录当前小圆圈的索引号 通过自定义属性来做 li.setAttribute('index', i); //把小li插入到ol里面 ol.appendChild(li); //4.小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件 li.addEventListener('click', function () { //干掉所有人 把所有的小li 清除 current 类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } //留下我自己 当前的小li 设置current 类名 this.className = 'current'; //5.点击小圆圈，移动图片 当然移动的是 ul //ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 //当我们点击了某个小li 就拿到当前小li 的索引号 var index = this.getAttribute('index'); //当我们点击了某个小li 就要把这个li 的索引号给 num num = index; //当我们点击了某个小li 就要把这个li 的索引号 给 circle circle = index; console.log(focusWidth); console.log(index); animate(ul, -index * focusWidth); }) } //把ol里面的第一个小li设置类名为 current ol.children[0].className = 'current'; //6.克隆第一张图片（li）放到ul 最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); //7. 点击右侧按钮 图片滚动一张 var num = 0; //circle 控制小圆圈的播放 var circle = 0; //flag 节流阀 var flag = true; arrow_r.addEventListener('click', function () { if (flag) { flag = false; //关闭节流阀 //如果走到了最后复制的一张图片， 此时 我们的ul 要快速复原 left 改为 0 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth, function () { flag = true; //打开节流阀 }); //8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle++; //如果circle==4 说明走到最后我们克隆的这张图片了 我们就复原 if (circle == ol.children.length) { circle = 0; } circleChange(); } }); //9.左侧按钮做法 arrow_l.addEventListener('click', function () { if (flag) { flag = false; //如果走到了最后复制的一张图片， 此时 我们的ul 要快速复原 left 改为 0 if (num == 0) { num = ul.children.length - 1; ul.style.left = num * focusWidth + 'px'; } num--; animate(ul, -num * focusWidth, function () { flag = true; }); //8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle--; //如果circle<0 说明第一张图片，则小圆圈要改为第四个小圆圈（3） // if (circle < 0) { // circle = ol.children.length - 1; // } circle = circle < 0 ? ol.children.length - 1 : circle; circleChange(); } }); function circleChange() { //先清除其余小圆圈的current类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } //留下当前的小圆圈的current类名 ol.children[circle].className = 'current'; } //10.自动播放轮播图 类似右侧按钮 把手动改为自动 var timer = setInterval(function () { //手动调用点击事件 arrow_r.click(); }, 2000); })
返回顶部
滚动窗口至文档中的特定位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: pink; } .w { width: 1200px; margin: 10px auto; } .header { height: 150px; background-color: purple; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } </style> </head> <body> <div class="slider-bar"> <span class="goBack">返回顶部</span> </div> <div class="header w">头部区域</div> <div class="banner w">banner区域</div> <div class="main w">主体部分</div> <script> //1.获取元素 var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); //banner.offsetTop 就是被卷去头部的大小 一定要写到滚动的外面 var bannerTop = banner.offsetTop //当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop - bannerTop; //获取main 主体元素 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; //2.页面滚动事件 scroll document.addEventListener('scroll', function () { // console.log(11); //window.pageYOffset 页面被卷去的头部 //console.log(window.pageYOffset); //3. 当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } //4.当我们页面滚动到main盒子，就显示 goback模块 if (window.pageYOffset >= mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }) //3.当我们点击了返回顶部模块，就让窗口滚动的页面的最上方 goBack.addEventListener('click', function () { //里面的x和y 不跟单位的 直接写数字即可 // window.scroll(0, 0); //因为是窗口滚动 所以对象是window animate(window, 0); }); //动画函数 function animate(obj, target, callback) { //console.log(callback); callback = function () { } 调用的时候 callback() //先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function () { //步长值写到定时器的里面 //把我们步长值改为整数 不要出现小数的问题 //var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - window.pageYOffset) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (window.pageYOffset == target) { //停止动画 本质是停止定时器 clearInterval(obj.timer); //回调函数写到定时器结束里面 // if (callback) { // //调用函数 // callback(); // } callback && callback(); } //把每次加1 这个步长值改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/10 // obj.style.left = window.pageYOffset + step + 'px'; window.scroll(0, window.pageYOffset + step); }, 30); } </script> </body> </html>
筋斗云案例
<script src="animate.js"></script> <script> window.addEventListener('load', function () { //1.获取元素 var cloud = document.querySelector('.cloud'); var c_nav = document.querySelector('.c-nav'); var lis = c_nav.querySelectorAll('li'); //2.给所有的小li绑定事件 //这个current 做为筋斗云的起始位置 var current = 0; for (var i = 0; i < lis.length; i++) { //(1)鼠标经过把当前小li 的位置做为目标值 lis[i].addEventListener('mouseenter', function () { animate(cloud, this.offsetLeft); }); //(2)鼠标离开就回到起始的位置 lis[i].addEventListener('mouseleave', function () { animate(cloud, current); }); //(3)当我们鼠标点击，就把当前位置做为目标值 lis[i].addEventListener('click', function () { current = this.offsetLeft; }); } }) </script> </head> <body> <div id="c_nav" class="c-nav"> <span class="cloud"></span> <ul> <li class="current"><a href="#">首页新闻</a></li> <li><a href="#">师资力量</a></li> <li><a href="#">活动策划</a></li> <li><a href="#">企业文化</a></li> <li><a href="#">招聘信息</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">我是小猪</a></li> <li><a href="#">谁是佩奇</a></li> </ul> </div> </body>
