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地址也可以从后台用随机数生成,效果是一样的。
JS实现随机背景图片与图片大小变换的效果的更多相关文章
- 记录一个js切换随机背景颜色的代码
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 一款非常炫酷的jQuery动态随机背景滚动特效
一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...
- js 动态生成背景图 GeoPattern
以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> ...
- JS验证图片格式和大小并预览
用于上传图片的js验证: <%@ page language="java" contentType="text/html; charset=UTF-8"p ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- js实现图片点击弹出放大效果
点击图片,显示蒙板,放大图片的简单案例 HTML代码: <div> <img height=" src="https://img-blog.csdn.net/20 ...
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- JavaScript校验图片格式及大小
<!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
随机推荐
- Codeforces Round #431 (Div. 2) B. Tell Your World
B. Tell Your World time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- Server Tomcat v8.0 Server at localhost was unable to start within 45 seconds
Servers -->双击你的启动服务--> 对话框左下角切换选项卡为 Overview -->中东找到Timeouts 把Start(in seconds)改为 100 ,然后按 ...
- Python3网络爬虫(3):使用User Agent和代理IP隐藏身份
Python版本: python3 IDE: pycharm2017.3.3 一.为何要设置User Agent 有一些网站不喜欢被爬虫访问,所以会检测对象,如果是爬虫程序,他就会不让你访问,通过设置 ...
- 【BZOJ2875】【NOI2012】随机数生成器(矩阵快速幂)
[BZOJ2875]随机数生成器(矩阵快速幂) 题面 Description 栋栋最近迷上了随机算法,而随机数是生成随机算法的基础.栋栋准备使用线性同余法(Linear Congruential Me ...
- [luogu3258][JLOI2014]松鼠的新家
题解 我们就在\([a_i,a_{i+1}]\)的路径上都\(+1\),然后单点查询就可以了. ac代码(吸了氧才过的QwQ) # include <bits/stdc++.h> # de ...
- Spring3.x 获取properties资源文件的值
Spring3.x 获取properties资源文件的值有两种方式: 第一种:使用<context:property-placeholder />标签 <context:prop ...
- 如何写一份优秀的java程序员简历
背景:进入第一家公司已经工作将近两年了,其中闲了一年,在准备自己的简历的时候,有种江郎才尽的感觉,不知道怎么写,看来平时还是要多积累多熟悉. ps:这里面的分享看完还是很受用的. 简历看得比较认真的, ...
- sscanf,sprintf 通过字符串与其它类型进行方便快捷的输入和输出
http://c.biancheng.net/cpp/html/296.html 头文件:#include <stdio.h> sscanf()函数用于从字符串中读取指定格式的数据,其原型 ...
- 基于Spring Cloud的微服务入门教程
(本教程的原地址发布在本人的简书上:http://www.jianshu.com/p/947d57d042e7,若各位看官有什么问题或不同看法请在这里或简书留言,谢谢!) 本人也是前段时间才开始接触S ...
- Ruler.java
/****************************************************************************** * Compilation: javac ...