原生js实现图片爆炸效果，图片轮播

个人理解：

分享今天刚做会图片爆炸效果，主要运用的知识内容便是

1.精灵图

2.for循环和if判断

3.js获取元素，js元素属性设置

4.setTimeout的应用

5.数组的应用以及其它的知识

6.新手，如有不足，请见谅

步骤分享：

1.先定义能用到的变量，js获取所需要的元素

2.创建一个大的div，大div的里面分为很多小div，循环创建小的div

3.设置小的div背景为大的div背景的一小部分，即精灵图

4.设置小div的随机运动轨迹，随机运动时间，最后设置透明的为0

5.定义事件，设置时间，运行完成后清除残留div，重新开始函数

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.div1 {

width: 400px;

height: 400px;

margin-top: 100px;

border: 1px solid;

margin-left: 500px;

transform: translate();

position: relative;

}

.div1>div {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.div1>div {

background-size: 100% 100%;

}

</style>

</head>

<body>

<div class="div1">

</div>

</body>

<script>

function ran(x, y) { //自定义函数ran 输出为[x，y)中的随机数 x可取，y不可取

return Math.random() * (y - x) + x

}

var arr = ["./1.jpg", "./2.jpg", "./3.webp", "./4.webp"] //图片路径定义为一个数组

var tp = 0; //定义小方块数组arr[] 的取值

var tpl = 1 //定义创建的大方块的 arr[]的取值

var t = 0; //定义大方块的 id名为 t

var z = 999 //定义大方块的z-index轴的大小

var a = document.getElementsByClassName("div1")

var w = a[0].scrollWidth;

var h = a[0].scrollHeight;

function show(x, y) {

var b = document.createElement("div")

b.style.zIndex = z

z = z - 1

b.id = "div" + t

var di = "div" + t

a[0].appendChild(b)

b.style.backgroundImage = "url(" + arr[tpl] + ")"

tpl++

if (tpl == 4) {

tpl = 0

}

for (var i = 0; i < y; i++) {

for (var j = 0; j < x; j++) {

var c = document.createElement("div")

c.style.float = "left"

c.style.width = w / x + "px"

c.style.height = h / y + "px"

c.style.backgroundImage = "url(" + arr[tp] + ")"

c.style.transition = "all " + ran(2, 3) + "s ease"

c.style.backgroundSize = 100 * x + "%" + 100 * y + "%"

c.style.backgroundPositionX = -100 * j + "%"

c.style.backgroundPositionY = -100 * i + "%"

var d = document.getElementById(di)

d.appendChild(c)

}

}

t++

tp++

if (tp == 4) {

tp = 0

}

setTimeout(function () {

var ch = d.children

for (var q = 0; q < x * y; q++) {

ch[q].style.transform = "rotateX(" + ran(-180, 180) + "deg)" + "rotateY(" + ran(-180, 180) + "deg)" + " translateX(" + ran(-180, 180) + "px)" + " translateY(" + ran(-180, 180) + "px)"

ch[q].style.opacity = 0

}

setTimeout(function () {

var qcl = t - 1

var qcl2 = "div" + qcl

var qc = document.getElementById(qcl2)

a[0].removeChild(qc)

show(x, y)

}, 2000)

}, 1000)

}

show(10, 10)

</script>

</html>

原生js实现图片爆炸效果，图片轮播相关推荐

原生js三种选项卡效果（轮播）
第三种:定时轮播切换(我这边定时是2s) <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
pc端html轮播带滑块,原生js实现移动端+pc端轮播插件
slide.js 原生js写的轮播兼容 pc+移动端插件,支持轮播速度,轮播内容,轮播间隔,手势灵敏度自定义,导航圆点点击跳转,手势滑动. 使用说明:slide.js文件包含小部分es6语法编写的文 ...
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
js html css 图片跑马灯效果（轮播）
js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...
用JavaScript完成图片爆炸效果
开发工具与关键技术:Adobe Dreamweaver CC 2017 JavaScript 作者:孙水兵撰写时间:2019年2月15 案例来源于51ct学院李游图片爆炸效果就是将一张图片碎成若干 ...
CSS3配合JavaScript图片爆炸效果
CSS3配合JavaScript实现图片爆炸效果先看看效果图: 代码如下: boom.html <!DOCTYPE html> <html lang="en"& ...
Js+CSS淡入式效果图片幻灯切换效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
php如何从左往右轮播,js实现从左向右滑动式轮播图效果
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
511遇见易语言教程窗口组件图片框属性实现轮播图
本节视频对易语言图片框的边框背景颜色.图片显示方式.做了示范,并且通过图片框实现了轮播图效果. 视频链接: 72 图片框属性教程源码: .版本 2 .支持库 eCompress.程序集窗口程序集_ ...

原生js实现图片爆炸效果，图片轮播

原生js实现图片爆炸效果，图片轮播相关推荐

最新文章

热门文章