zoukankan      html  css  js  c++  java
  • JS实现网页背景旋转缩放轮播效果

    实现效果:效果预览

    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 + '" alt=""></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 + '" alt=""></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接口

    包含了很多图片,欢迎大叫调用。

    当然你也可以使用自己的方法换图片地址。

  • 相关阅读:
    跟我学Angular2(1-初体验)
    JavaScript之糟粕
    JavaScript之毒瘤
    CSS布局(下)
    CSS布局(上)
    ES6入门系列三(特性总览下)
    ES6入门系列四(测试题分析)
    setTimout执行时间
    进程和线程关系及区别
    css3新单位学习
  • 原文地址:https://www.cnblogs.com/tcxq/p/10426067.html
Copyright © 2011-2022 走看看