Question

当我点击链接时，例如在index.html中，我点击“contact”，这是外部的“contact.html”，我想创建一个平滑的过渡。给我一些提示......

示例：

<a id="map"  href="otherPage.html" target="_self">
     <img src="images/icons/map.png" width="100" height="100">
</a>

我不希望otherPage.html立即加载，我希望它看起来非常流畅/缓慢

Answer 1

试试这个

var speed = 'slow';

$('html, body').hide();

$(document).ready(function() {
    $('html, body').fadeIn(speed, function() {
        $('a[href], button[href]').click(function(event) {
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
            event.preventDefault();
            $('html, body').fadeOut(speed, function() {
                window.location = url;
            });
        });
    });
});

Answer 2

您可能想要使用ajax导航系统当您单击某个链接时，您会发送所需页面的ajax请求并将其内容显示在当前页面中（不刷新它）。

这是我使用相同“平滑导航”技术构建的网站示例：http://www.opisband.ro/

Answer 3

您可以使用jquery： http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

将css和js文件放在您网站的css和js foler中，并添加到您想要平滑过渡功能的每个页面：

    <link rel="stylesheet" type="text/css" title="default" href="css/main.css">
    <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>

Answer 4

查看此网站：http://www.marcocali.com/ 以及相关的JS：http://www.marcocali.com/public/js/index.js?v=4

html页面之间平滑过渡

4 个答案: