通过js实现图片爆炸特效

使用工具:DW

页面效果;

代码中的HTML部分只有一个id为div1的div标签

<div id=”div1”></div>

这个div标签中包含40张小图片;

CSS部分:

*{margin: 0px;padding: 0px;list-style:none;}#div1{width:640px;height:400px;position:absolute;left:50%;top:50%;margin-left:-320px;margin-top:-200px;border:1px solid black;transform-style: preserve-3d;/*使子元素保留3D元素*/}#div1>div{position: absolute; background:black;transform: perspective(800px);/*perspective属性定义3D元素距视图的距离，以像素记*/}</style>

Js部分:

<script>var x=8;//一行有八个方块var y=5;//一列有5个方块;for(var i=0; i<y; i++){for(var j=0; j<x; j++){var odiv=document.createElement("div");//createElement方法可创建元素节点;odiv.style.background="url('images/27681679fe975de4-6b457c7ea18e3f04-013d4db5b8b0d3a0e905d04c61ce5179 (1).jpg')";odiv.style.width=div1.clientWidth / x+"px";odiv.style.height=div1.clientHeight / y+"px";odiv.style.left=(div1.clientWidth/x)*j+"px";//640/8    80  从0开始 80<值<560//640      160 //         240odiv.style.top=(div1.clientHeight/y)*i+"px";//400/5 80  80  从0开始 80值<320odiv.style.backgroundPositionX=(div1.clientWidth/x)*-j+"px";//backgroundposition属性设置背景图片的位置odiv.style.backgroundPositionY=(div1.clientHeight/y)*-i+"px";//400/5 -80 -240    -320<值<0//Matn.random((max-min+1)min);odiv.style.transition=(Math.random()*1+0.5)+"s";div1.appendChild(odiv);//appendchild()方法可向节点的子节点列表的末尾添加新的子节点;console.log(div1.clientWidth);console.log(div1.clientHeight);}};var allt=div1.children;//遍历所有子元素 div1有48个字元素;for(var i=0; i<allt.length; i++){allt[i].style.transform='perspective(800px) rotateX('+(Math.random()*360-180)+'deg) rotateY('+(Math.random()*360-180)+'deg) translateX('+(Math.random()*400-200)+'px) translateY('+(Math.random()*400-200)+'px) translateZ('+(Math.random()*200+100)+'px)'}setTimeout(function(){for(var i=0; i<allt.length; i++){allt[i].style.transform='perspective(800px) rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(0px)'}},3000)</script>

注释:clientWidth:返回元素的可见宽度;

ClientHeight:返回元素的可见高度;

BackgroundPosition:属性设置背景图像的位置.

transform：向元素应用2D或3D转换;

Random()方法可以返回介于0~1之间的一个随机数;

通过js实现图片爆炸特效相关推荐

HTML5 canvas图片爆炸特效
这是一款基于html5 canvas的炫酷图片爆炸飞散特效js插件.该js插件当用鼠标点击图片时,图片会有玻璃窗被子弹击碎时的爆炸飞散效果,非常炫酷. 在线演示:http://www.htmleaf. ...
js实现图片放大特效
HTML代码如下: <div class="box"><div class="pic1"> < ...
three.js 实现图片粒子爆炸特效
大家好,这里是 CSS 魔法使--alphardex. 以下是最终实现的效果图撒,哈吉马路由! 准备工作笔者的three.js模板:点击右下角的fork即可复制一份世界同步在我的上一篇博文中, ...
分享111个JS图片切换特效，总有一款适合您
分享111个图片切换,总有一款适合您下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 111个图片切换下载链接:https://pan.baidu.com/s/1iGzOzU ...
html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效
这是一款js和CSS3 3D立方体图片画廊特效.该3D立方体图片画廊特效通过CSS3进行布局,构建立方体,然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作. 由于该该3D立方体图片画廊特效中 ...
原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...
用JS写出JS事件中京东图片放大特效
图片放大特效准备两张相同的图片,小图和大图. 小图显示在商品的展示区域. 大图用于鼠标在小图上移动时,按比例的显示大图中的对应区域. 编写HTML页面,展示小图.隐藏鼠标的遮罩及大图. 当鼠标在小图 ...
原生JS实现切换不同图片的特效
分享一个由原生JS实现的图片切换特效,效果如下: 原理比较简单,实现的代码如下: <!doctype html> <html><head><meta char ...
html5js图片滚动,基于滚动的超酷js图片动画特效
这是一款基于滚动的超酷js图片动画特效.该特效在使用鼠标滚动屏幕时,根据屏幕的当前位置,屏幕上的图片做出相应的动画效果,非常炫酷. 使用方法 HTML结构 CSS样式 // The container ...
html+css+js表白代码，实现打字动画、动态爱心、图片旋转木马特效、下雪特效
给男朋友准备的520礼物,他觉得太尴尬了,于是我特地把这个项目开源,让大家一起感受一下男票的尴尬,哈哈哈哈哈哈我好恶趣味. 话不多说上代码: 一.动态爱心+打字动画 html部分: <!doct ...

通过js实现图片爆炸特效

通过js实现图片爆炸特效相关推荐

最新文章

热门文章