JS实现随机背景图片与图片大小变换的效果

　　经常在网上见一些网站访问一次背景图片改变一次，而且图片的大小不停变换，于是想着自己研究一下。

　　背景图片可以通过JS的随机数来改变图片的src来实现随机图片，图片的大小变换可以用JS的setInterval实现。

 

img目录下的图片:

 测试代码:

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.8.3.min.js"></script>
    </head>

    <body>
        <img id="img1" style="z-index: -1;position: absolute;left: 0;top: 0;" />
    </body>

</html>
<script>
    + function() {
        //设置初始化设置
        $("#img1").attr("src", "./img/" + getRandomSrc() + ".jpg");
        var width = window.innerWidth > 0 ? window.innerWidth : document.body.clientWidth; //宽度
        var height = window.innerHeight > 0 ? window.innerHeight : document.body.clientHeight; //高度
        $("#img1").attr("width", width);
        $("#img1").attr("height", height);
        //动画效果
        var changeSize = 100;
        var time = 3000;
        var heightChangeSize = changeSize * height / width;
        var bigWidth = width + changeSize;
        var bigHeight = height + heightChangeSize;
        $("#img1").animate({
            width: bigWidth,
            height: bigHeight,
            left: -changeSize / 2,
            top: -heightChangeSize / 2
        }, time);
        var flag = 0;
        setInterval(function() {
            if (flag == 1) {
                flag = 0;
                $("#img1").animate({
                    width: bigWidth,
                    height: bigHeight,
                    left: -changeSize / 2,
                    top: -heightChangeSize / 2
                }, time);
            } else {
                flag = 1;
                $("#img1").animate({
                    width: width,
                    height: height,
                    left: "0",
                    top: "0"
                }, time);
            }
        }, time);
    }();

    function getRandomSrc() {
        var rnd = Math.ceil(Math.random() * 7);
        return rnd;
    }
</script>
复制代码

 结果可以实现每次访问图片src随机而且大小不停的变换。

 

一般是在登录页使用上面的效果实现呼吸图的效果，如果纵向出现滚动条的话可以用下面css代码隐藏滚动条:

    <img id="img1" style="z-index: -1;position: absolute;left: 0;top: 0;width: 100%;height: 100%;"/>

 

 html,body{
  overflow-y:hidden;
}

　　如果在JS不生效，图片的src地址也可以从后台用随机数生成，效果是一样的。

 

posted @   QiaoZhi  阅读(2177)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
历史上的今天：
2017-10-30 【Tomcat】如何优化tomcat配置(从内存、并发、缓存4个方面)优化
2017-10-30 ArrayList去除重复元素
2017-10-30 【commons-io】File对文件与目录的处理&FileUtis,IOUtils,FilenameUtils工具的使用
2017-10-30 mysql获取行号的方法
点击右上角即可分享
微信分享提示