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

　　背景图片可以通过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地址也可以从后台用随机数生成，效果是一样的。

JS实现随机背景图片与图片大小变换的效果的更多相关文章

  1. 记录一个js切换随机背景颜色的代码

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. 一款非常炫酷的jQuery动态随机背景滚动特效

    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...

  3. js 动态生成背景图 GeoPattern

    以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> ...

  4. JS验证图片格式和大小并预览

    用于上传图片的js验证: <%@ page language="java" contentType="text/html; charset=UTF-8"p ...

  5. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  6. js实现图片点击弹出放大效果

    点击图片,显示蒙板,放大图片的简单案例 HTML代码: <div> <img height=" src="https://img-blog.csdn.net/20 ...

  7. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. JavaScript校验图片格式及大小

    <!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...

  9. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

随机推荐

  1. day23 序列化模块

    概念: 序列化 -- 其他数据类型转换成一个字符串数据类型 反序列化 -- 字符串转换成其他数据类型 序列 -- 字符串 必须要转换成字符串的场景: 往文件里面写数据的时候只能写字符串,不能写字典的 ...

  2. HTML DOM setAttribute()、与createAttribute()

    setAttribute().与createAttribute() 都可以动态的为DOM 添加属性:但是用法却不一样: 1.setAttribute() setAttribute() 直接在DOM节点 ...

  3. Zabbix 添加对交换机端口流量超出阈值的监控

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 22 Zabbix 添加对交换机端口流量超出阈值的监控 本文主要讲解利用zabbix 添加对交换机 ...

  4. 【BZOJ2426】[HAOI2010]工厂选址（贪心）

    [BZOJ2426][HAOI2010]工厂选址(贪心) 题面 BZOJ 洛谷 题解 首先看懂题目到底在做什么. 然而发现我们显然可以对于每个备选位置跑一遍费用流,然后并不够优秀. 不难发现所有的位置 ...

  5. 决策单调性优化dp

    决策单调性: 对于一些dp方程,经过一系列的猜想和证明,可以得出,所有取的最优解的转移点(即决策点)位置是单调递增的. 即:假设f[i]=min(f[j]+b[j]) (j<i) 并且,对于任意 ...

  6. java 线程栈 & java.lang.StackOverflowError

    网上搜索了一下,关于java的线程栈: JDK5.0以后每个线程堆栈大小为1M,以前每个线程堆栈大小为256K. JVM的内存,被划分了很多的区域: (来源:http://www.iteye.com/ ...

  7. vs widows服务的开发

    最近再做一个视频管理系统,发现用户提交时实时转换视频非常慢.于是有了通过建立一个单独的服务.通过服务定时查询数据库,是否有需要转换的视频来解决问题.现把过程记录下来,已供参考 1.新建widows 服 ...

  8. Shell脚本编写及常见面试题

      注意事项 1)开头加解释器:#!/bin/bash 2)语法缩进,使用四个空格:多加注释说明. 3)命名建议规则:变量名大写.局部变量小写,函数名小写,名字体现出实际作用. 4)默认变量是全局的, ...

  9. java中BorderLayout的使用方法

    相关设置: 使用BorderLayout布局上下左右中布局5个按键,单击中间的那个按键时就关闭窗口 代码: /**** *java中BorderLayout的使用方法 * 使用BorderLayout ...

  10. mysql 之各种 join 之间的关系

    一.了解一下 mysql 中所拥有的各种 join left join(左联接):返回包括左表中的所有记录和右表中联结字段相等的记录  right join(右联接):返回包括右表中的所有记录和左表中 ...