1

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

例子：

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

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

4

4 回答 4

2

尝试这个

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;
            });
        });
    });
});
于 2014-04-08T06:26:34.013 回答
1

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

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

于 2011-04-30T12:43:34.550 回答
0

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

于 2014-04-08T06:29:56.550 回答
-1

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

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

    <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>
于 2013-03-21T22:03:39.230 回答