基于javascript实现漂亮的页面过渡动画效果附源码下载

下面详细讲解一下“基于javascript实现漂亮的页面过渡动画效果附源码下载”的完整攻略。

一、前言

随着互联网的发展，用户对于网站的要求也越来越高，而页面过渡动画效果可以很好的提高用户体验，增强网站的吸引力。在这篇攻略中，我们将会介绍如何基于Javascript实现漂亮的页面过渡动画效果。

二、概述

本攻略将会通过两个实例来说明如何利用Javascript实现页面过渡动画效果。其中，第一个示例将会演示如何实现图片轮播效果，第二个示例将会演示如何实现网站导航菜单效果。

三、实例一：图片轮播

1、分析

图片轮播是常见的页面过渡动画效果之一，我们需要实现一个能够自动轮播的图片展示区域，并且鼠标悬浮在图片上时，能够暂停自动轮播，同时还需要添加左右切换按钮。

2、实现

我们可以通过CSS设置轮播图片区域的样式，然后通过Javascript来实现自动轮播、暂停轮播以及左右切换等功能。参考代码如下：

// 定义轮播图片数组
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
var imgIndex = 0; // 当前显示的图片索引

// 设置轮播区域的样式
$("#imgBox").css({position: "relative", margin: "0 auto", width: "600px", height: "300px", overflow: "hidden"});
$("#imgBox img").css({position: "absolute", top: 0, left: 0, width: "100%", height: "100%"});

// 自动轮播函数
var autoplay = function() {
    imgIndex ++;
    if (imgIndex > imgArr.length - 1) {
        imgIndex = 0;
    }
    $("#imgBox img").eq(imgIndex).fadeIn(1000).siblings().fadeOut(1000);
};

// 设置定时器，每隔2秒自动切换图片
var timer = setInterval(autoplay, 2000);

// 鼠标悬浮在图片上时，停止自动轮播
$("#imgBox img").mouseenter(function() {
    clearInterval(timer);
}).mouseleave(function() {
    timer = setInterval(autoplay, 2000);
});

// 绑定左右切换按钮的点击事件
$("#btnLeft").click(function() {
    imgIndex --;
    if (imgIndex < 0) {
        imgIndex = imgArr.length - 1;
    }
    $("#imgBox img").eq(imgIndex).fadeIn(1000).siblings().fadeOut(1000);
});

$("#btnRight").click(function() {
    imgIndex ++;
    if (imgIndex > imgArr.length - 1) {
        imgIndex = 0;
    }
    $("#imgBox img").eq(imgIndex).fadeIn(1000).siblings().fadeOut(1000);
});

四、实例二：网站导航菜单

1、分析

网站导航菜单通常出现在网站的顶部或左侧，当用户鼠标悬浮在菜单项上时，菜单项会发生变化，当用户点击菜单项时，菜单状态也会发生变化。

2、实现

我们可以通过CSS设置导航菜单的样式，然后通过Javascript来实现菜单项悬浮效果、菜单状态切换等功能。参考代码如下：

// 定义菜单数据
var menuData = [
    {name: "首页", url: "#home", icon: "fa-home"},
    {name: "产品中心", url: "#product", icon: "fa-book"},
    {name: "案例展示", url: "#case", icon: "fa-camera"},
    {name: "关于我们", url: "#about", icon: "fa-user"},
    {name: "联系我们", url: "#contact", icon: "fa-phone"}
];

// 生成导航菜单
var menuHtml = "";
for (var i = 0; i < menuData.length; i++) {
    menuHtml += '<li><a href="' + menuData[i].url + '"><i class="fa ' + menuData[i].icon + '"></i>' + menuData[i].name + '</a></li>';
}
$("#menu").html(menuHtml);

// 给菜单项绑定悬浮效果
$("#menu li a").hover(function() {
    $(this).addClass("hover").find("i").addClass("animated shake");
}, function() {
    $(this).removeClass("hover").find("i").removeClass("animated shake");
});

// 给菜单项绑定点击事件
$("#menu li a").click(function() {
    $(this).parent().addClass("active").siblings().removeClass("active");
});

五、结语

通过本攻略的介绍，我们可以看到Javascript实现页面过渡动画效果是非常简单的，通过一些基本的代码，就可以实现很多漂亮的动画效果。当然，实现好的动画效果还需要考虑到用户体验、页面性能等方面的因素。