护卫神 安装wordpress/网站搜索引擎优化的基本内容
目录
一、带动画返回顶部
二、菜单栏跟随鼠标案例
一、带动画返回顶部
案例分析：
- 可采用之前封装的函数动画animate.js
- 需将animate.js内left相关的值修改为和垂直滚动距离相关就可以
- 页面滚动多少，可以通过window.pageYOffset得到
.slider_bar {position: absolute;left: 50%;top: 300px;margin-left: 600px;width: 45px;height: 130px;background-color: skyblue;}.w {width: 1200px;margin: 10px auto;}.header {height: 150px;background-color: red;}.banner {height: 250px;background-color: orange;}.main {height: 1000px;background-color: yellow;}span {display: none;position: absolute;bottom: 0;} <div class="slider_bar"><span class="back w">返回顶部</span></div><div class="header w">头部区域</div><div class="banner w">banner区域</div><div class="main w">主题内容</div><script>var slider_bar = document.querySelector('.slider_bar');var banner = document.querySelector('.banner');var bannerTop = banner.offsetTop;var slider_barTop = slider_bar.offsetTop - bannerTop;var main = document.querySelector('.main');var back = document.querySelector('.back');var mainTop = main.offsetTop;document.addEventListener('scroll',function(){if(window.pageYOffset >= bannerTop){// 页面滚动到header之后，侧边栏固定slider_bar.style.position = 'fixed';slider_bar.style.top = slider_barTop +'px';} else {slider_bar.style.position = 'absolute';slider_bar.style.top = 300 +'px';}if(window.pageYOffset >= mainTop){// 页面滚动到main，显示侧边栏内容back.style.display = 'block';} else {back.style.display = 'none';}});back.addEventListener('click', function(){animate(window, 0);});// 动画函数function animate(obj, target, 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);callback && callback();} else {// obj.style.left = window.pageYOffset + step +'px';window.scroll(0,window.pageYOffset + step);}},15);}</script>二、菜单栏跟随鼠标案例
鼠标经过菜单栏的某个li，颜色框就跟随到这个li位置
鼠标离开这个li，颜色框就复原为原来的位置
鼠标点击了单栏的某个li，颜色框就会留在点击这个小li的位置
案例分析：
- 利用动画函数做动画效果
- 原先颜色框的起始位置是0
- 鼠标经过某个li，就把当前 li 的 offsetLeft位置作为目标值即可
- 鼠标离开这个li，就把目标值设为0
- 如果点击了某个li，就把li当前卫视存储起来，当鼠标离开，颜色框就回到这个位置
<style>* {margin: 0;padding: 0}ul {list-style: none;}body {background-color: black;}.nav {width: 900px;height: 42px;background: #fff;margin: 100px auto;border-radius: 5px;position: relative;}.nav ul {position: absolute;}.nav li {float: left;width: 83px;text-align: center;line-height: 42px;}.nav li a {color: #333;text-decoration: none;display: inline-block;height: 42px;}.nav li a:hover {color: white;}.selPart {position: absolute;left: 0;top: 0;width: 83px;height: 42px;background: skyblue;border-radius: 5px;}
</style><body><div class="nav" id="nav"><span class="selPart"></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><script src="animate.js"></script>
<script>window.addEventListener('load',function(){var selPart = document.querySelector('.selPart');var nav = document.querySelector('.nav');var lis = nav.querySelectorAll('li');var current = 0;for(var i = 0; i < lis.length; i++){// 鼠标经过，移动颜色框到经过的li位置lis[i].addEventListener('mouseenter',function(){animate(selPart, this.offsetLeft);});// 鼠标离开lis[i].addEventListener('mouseleave',function(){animate(selPart, current);});lis[i].addEventListener('click',function(){current = this.offsetLeft;animate(selPart, current);});}});
</script>
