1. 程式人生 > >JS實現網頁背景旋轉縮放輪播效果

JS實現網頁背景旋轉縮放輪播效果

parse html char height sta api接口 圖片地址 wid col

實現效果:效果預覽

css代碼:

.switch_images {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}
.switch_images li {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute
; top: 0; left: 0; transition: 6s all; } .switch_images img { min-height: 100%; width: 100%; }

目的:讓背景全屏顯示並且位於最底層。

html代碼:

<body>
        <ul class="switch_images" id="pic_content">
            <!-- 圖片輪播 -->
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
        </ul>
</body>

這裏我們先插入了三張壁紙,避免剛開始通過函數加載出來的壁紙延遲。

js代碼:

    setInterval(function () {
            $.get(‘http://api.youngam.cn/picapi.php‘, function (data) { //通過ajax獲取到新的圖片地址
                $(‘#pic_content‘).prepend(
                    ‘<li><img src="‘ + data + ‘" ></li>‘);//插入新的li
            });

        //刪除最後一個li
        $(‘#pic_content li:last-child‘).remove();
        $(‘#pic_content li:last-child‘).css(
{ transform: ‘scale(1.1) rotate(‘ + parseInt((Math.random() - 0.5) * 20) + ‘deg)‘, opacity: ‘0‘ });//刪除最後一個li時給他一個過度。旋轉+-10度,透明度變為0 }, 8000);//8秒切換一張

總代碼:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景輪播</title>
        <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
.switch_images {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}
.switch_images li {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 6s all;
}
.switch_images img {
    min-height: 100%;
    width: 100%;
}
        </style>
    </head>
    <body>
        <ul class="switch_images" id="pic_content">
            <!-- 圖片輪播 -->
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
        </ul>
    </body>
    <script>
    setInterval(function () {
            $.get(http://api.youngam.cn/picapi.php, function (data) {
                $(#pic_content).prepend(
                    <li><img src=" + data + " ></li>);
            });

        //刪除最後一個li
        $(#pic_content li:last-child).remove();
        $(#pic_content li:last-child).css({
            transform: scale(1.1) rotate( + parseInt((Math.random() - 0.5) * 20) + deg),
            opacity: 0
        });
    }, 8000);
    </script>
</html>

這裏調用了我的圖片api接口。

包含了很多圖片,歡迎大叫調用。

當然你也可以使用自己的方法換圖片地址。

JS實現網頁背景旋轉縮放輪播效果