1. 加载动画
这是一个伪加载动画：通过 setTimeout(fn,s) 实现的正在加载中的错觉
CSS使用到 display:flex; 将loading动画定位在屏幕中间，整个动画是页面的一个遮罩层
2. 鼠标中间滚动事件
window.onscroll=function(){}
window.scrollY 属性：文档从顶部开始滚动过的像素值
当滚动鼠标中键时，导航栏变化样式：
window.onscroll=function () {
if (window.scrollY!=0){
document.getElementById("top-nav-bar").classList.add("gundong");
}else if (window.scrollY==0){
document.getElementById("top-nav-bar").classList.remove("gundong");
}
};
3. 二级菜单
可以通过鼠标进入事件给要显示菜单添加 class 类名的方式显示二级菜单，鼠标离开时移除
let liTags=document.querySelectorAll(".top-nav-bar>nav>ul>li");
for (let i=0;i<liTags.length;i++){
liTags[i].onmouseenter=function (x) {
x.currentTarget.classList.add('active'); //原生js添加类名
};
liTags[i].onmouseleave=function (x) {
x.currentTarget.classList.remove('active');
};
}
4. 页面内点击跳转锚点和缓动效果
通过给 <a> 添加 href='#id' ，再给跳转至标签添加相应 id 实现页面内锚点跳转
另：缓动动画可以使用连续定时器模拟（设置定时器>清理>再设置）
let aTags=document.querySelectorAll(".top-nav-bar>nav>ul>li>a");
for (let i=0;i<aTags.length;i++){
aTags[i].onclick=function (x) {
x.preventDefault(); //阻止a标签的默认动作
let a=x.currentTarget;
let tiaozhuan=a.getAttribute("href"); //获取当前点击标签“href”属性
let ele=document.querySelector(tiaozhuan);
let top=ele.offsetTop; //距离页面最顶端距离
//window.scrollTo(0,top-70); //窗口滚到哪
let currentTop=window.scrollY;
let targetTop=top;
let s=Math.abs(targetTop-currentTop);
/*****在网上找的缓动函数*****/
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
}
requestAnimationFrame(animate);
var coords = { y: currentTop};
var tween = new TWEEN.Tween(coords)
.to({ y: targetTop-70}, (s/100)*100)
.easing(TWEEN.Easing.Quadratic.InOut)
.onUpdate(function() {
window.scrollTo(0,coords.y);
})
.start();
/*******************************/
}
}
5. 实现滚动至指定位置，下方 <div> 出现
在HTML中给相应 <div> 添加自定义date-x属性作为标记，通过判断相邻两个 <div> 局窗口顶端的距离是否显示下方 <div>
let dateTags=document.querySelectorAll('[date-x]');
let minIndex=0; //从当前位置开始
//判断当前位置距离窗口顶端最近的div
for (let i=0;i<dateTags.length;i++){
if (Math.abs(dateTags[i].offsetTop-window.scrollY)<Math.abs((dateTags[minIndex].offsetTop-window.scrollY)/2)){
minIndex=i;
}
}
dateTags[minIndex].classList.remove("move");
/******滚动至相应位置时给导航栏中相应标签添加样式********/
let id=dateTags[minIndex].id;
let a=document.querySelector('a[href="#'+id+'"]');
let li=a.parentNode;
let lis=li.parentNode.children;
for (let i=0;i<lis.length;i++){
lis[i].classList.remove("scrollAct");
}
li.classList.add("scrollAct");
6. 刷新回到顶部
使用到 window.onload 事件
window.onload=function(){
if(document.body.scrollTop>0){
window.scrollTo(0,-1);
document.body.scrollTop=0;
}
window.scrollTo(0,-1);
document.body.scrollTop=0;
setTimeout(() => window.scrollTo(0,0), 150)
}
7. 点击回到顶部
这里使用到 jQuery 效果 - animate() 方法
$(function () {
//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function(){
//判断html标签是否存在该方法
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, 1000);
return false;
}
$('body').animate({ scrollTop: 0 }, 1000);
return false;
});
});
8. 介绍卡部分的跟随鼠标位置变化函数
banner.offsetLeft + banner.offsetWidth / 2 div中心到页面左边距
e.pageX 鼠标的位置
var banner = document.querySelector('.user-card');
banner.addEventListener('mousemove', function(e){
this.style.transition = '';
var centerX = banner.offsetLeft + banner.offsetWidth / 2, //div中心点到页面左边距离
centerY = banner.offsetTop + banner.offsetHeight / 2;
var deltaX = e.pageX - centerX,
deltaY = e.pageY - centerY;
var percentageX = deltaX / centerX, //向左或向右的 偏差率
percentageY = deltaY / centerY;
var deg = 25; //控制 偏差的 程度
this.style.transform = 'rotateX(' + percentageY * deg + 'deg)'
+ 'rotateY(' + percentageX * deg + 'deg) translateZ(20px)';
});
banner.addEventListener('mouseleave', function(e){
this.style.transform = 'rotateX(0) rotateY(0) translateZ(0px)';
this.style.transition = 'all 0.2s linear';
})
9. 技能圈做法
通过js循环插入n条bar，然后用bar的伪元素显示环
$(document).ready(function() {
var i = 0;
$('.circle-chart').each(function() {
var id = 'chart' + i;
$(this).attr('id', id);
drawCircleChart('#' + id);
i++;
})
//给每个条添加id
$('.circle-chart').click(function() {
var thisId = $(this).attr('id');
drawCircleChart('#' + thisId);
})
//画圈函数 按照百分比插入多少个bar
function drawCircleChart(id) {
$(id).empty().append("<p>" + $(id).data('percent') + "%</p>");
addOneBar(id);
}
function addOneBar(id) {
var percent = $(id).data('percent');
var noOfBars = .36 * percent;
if ($(id).children().length - 1 < noOfBars) {
$(id).append('<div class="bar"></div>');
setTimeout(function() {
addOneBar(id);
}, 30);
}
}
})
CSS
.circle-chart .bar:nth-child(x) {
-ms-transform: rotate(xxxdeg);
-webkit-transform: rotate(xxxdeg);
transform: rotate(xxxdeg);
}
注意问题：
- xxx.TagName返回的是大写标签名
- nodeType 节点类型，用于判断是否为某种类型
常用的有：
Node.ELEMENT_NODE值为1 节点元素 如<p><div>等
Node.TEXT_NODE值为3 文本节点 - div[data-x] 表示含有 data-x 属性的 div
- 更改样式：使用 JS 实现，通过 JS 给需要添加效果的地方添加类名，并在 CSS 中添加对应样式。注：不一定给本体加，也可以给其父元素
网友评论