网站js特效代码

网站JS特效代码是指在网站页面中通过JavaScript代码实现的一些特效效果。这些特效可以使网站页面更加丰富和生动，增加用户体验，提高页面的交互性和美观度，是现代网站不可缺少的功能之一。

常见的网站JS特效代码主要包括以下几类：

1. 页面滚动特效：页面滚动特效是最常见的一种特效，通过JavaScript代码实现，可以在用户滑动页面时触发特效，如吸顶菜单、滚动动画、视差滚动等。

示例代码：

window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > 100) {
        document.querySelector(".header").classList.add("fixed");
    } else {
        document.querySelector(".header").classList.remove("fixed");
    }
}

2. 鼠标悬停特效：鼠标悬停特效可以在用户把鼠标移动到页面元素上时触发特效，如弹出菜单、放大缩小、翻转等。

示例代码：

document.querySelector("#box").onmouseover = function() {
    this.style.transform = "scale(1.2)";
}
document.querySelector("#box").onmouseout = function() {
    this.style.transform = "scale(1)";
}

3. 点击交互特效：点击交互特效可以在用户点击页面元素时触发特效，如模态框、折叠菜单、标签切换等。

示例代码：

document.querySelector("#btn").onclick = function() {
    document.querySelector(".modal-wrapper").style.display = "block";
}

4. 自动轮播特效：自动轮播特效可以在网站页面中设置轮播图，自动播放和切换图片，提高页面的视觉效果和丰富度。

示例代码：

var index = 0;
var timer = setInterval(function(){
    index++;
    if(index>3){
        index = 0;
    }
    changeImg();
},2000);

function changeImg(){
    var imgs = document.querySelectorAll(".slider-item");
    for(var i=0;i<imgs.length;i++){
        imgs[i].classList.remove("active");
    }  
    imgs[index].classList.add("active");
}

总之，网站JS特效代码可以大大提