利用History.replaceState无刷新改变url并且加载新的页面动画展示

<!DOCTYPE html>
<html class="animated bounceInRight">
<head>
    <meta charset="utf-8">
    <title>梦雨原创</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<style type="text/css" media="all">
        *{font-size:14px;margin:0;padding:0;border:0;list-style:none;text-decoration:none;color:inherit;font-weight:400;box-sizing:border-box;font-style:normal;outline:0;-webkit-tap-highlight-color:transparent;outline:0;text-decoration:none}
        body{width:100%;overflow-x:hidden;background:#fff}
        img {
            width: 150px;
        }
        .iframe {
            position: fixed;
            z-index: 999;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: #FFF;
            transition: all .4s ease;
            -webkit-transition: all .4s ease;
            -moz-transition: all .4s ease;
            -ms-transition: all .4s ease;
            -o-transition: all .4s ease;
        }
        .iframe_1 {
            transform: translateX(110%);
        }
        .iframe_2 {
            transform: translateY(00%);
            transform: translateX(00%);
        }
        .iframe_3 {
            border: none;
            overflow-y: auto;
        }
	</style>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="gallery">
        <a href="?id=1">
            <img src="/public/img/touxiang.jpg" data_url="?id=1" data_title="第1个页面">
        </a>

        <a href="?id=2">
            <img src="/public/img/touxiang.jpg" data_url="?id=2" data_title="第2个页面">
        </a>

        <a href="?id=3">
            <img src="/public/img/touxiang.jpg" data_url="?id=3" data_title="第3个页面">
        </a>

        <a href="javascript:;" onclick="back()">
            <img src="/public/img/touxiang.jpg">
        </a>

    </div>
</div>
<div id="iframe"></div>
</body>
<script>
// 取消
function back(){
	$('#iframe>div').removeClass('iframe_2');
	setTimeout(function(){
        $('#iframe').empty();
    }, 200);
}
var container = document.querySelector('.gallery');
container.addEventListener('click', function(e) {
    if (e.target != e.currentTarget) {
        e.preventDefault();
        var data = e.target.getAttribute('src'),
        url = e.target.getAttribute('data_url');
        title = e.target.getAttribute('data_title');
        history.pushState(null, null, url);
        $.ajax({
            url: url,
            type: "GET",
            success: function(data) {
                var REG_BODY = /<body[^>]*>([\s\S]*)<\/body>/;
                var result = REG_BODY.exec(data);
                // console.log(result);
                $('#iframe').html('<div class="iframe iframe_1">'+result[1]+'</div>');
                setTimeout(function(){
                    $('#iframe>div').addClass('iframe_2 iframe_3');
                }, 200);
            }
        });
        document.title=title;
    }
    e.stopPropagation();
}, false);
</script>
</html>

 


评论