使用工具: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实现图片爆炸特效相关推荐

  1. HTML5 canvas图片爆炸特效

    这是一款基于html5 canvas的炫酷图片爆炸飞散特效js插件.该js插件当用鼠标点击图片时,图片会有玻璃窗被子弹击碎时的爆炸飞散效果,非常炫酷. 在线演示:http://www.htmleaf. ...

  2. js实现图片放大特效

    HTML代码如下: <div class="box"><div class="pic1"> <!-- 小图盒子 -->< ...

  3. three.js 实现图片粒子爆炸特效

    大家好,这里是 CSS 魔法使--alphardex. 以下是最终实现的效果图 撒,哈吉马路由! 准备工作 笔者的three.js模板:点击右下角的fork即可复制一份 世界同步 在我的上一篇博文中, ...

  4. 分享111个JS图片切换特效,总有一款适合您

    分享111个图片切换,总有一款适合您 下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 111个图片切换下载链接:https://pan.baidu.com/s/1iGzOzU ...

  5. html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效

    这是一款js和CSS3 3D立方体图片画廊特效.该3D立方体图片画廊特效通过CSS3进行布局,构建立方体,然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作. 由于该该3D立方体图片画廊特效中 ...

  6. 原生JS实现图片跑马灯特效

    今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...

  7. 用JS写出JS事件中京东图片放大特效

    图片放大特效 准备两张相同的图片,小图和大图. 小图显示在商品的展示区域. 大图用于鼠标在小图上移动时,按比例的显示大图中的对应区域. 编写HTML页面,展示小图.隐藏鼠标的遮罩及大图. 当鼠标在小图 ...

  8. 原生JS实现切换不同图片的特效

    分享一个由原生JS实现的图片切换特效,效果如下: 原理比较简单,实现的代码如下: <!doctype html> <html><head><meta char ...

  9. html5js图片滚动,基于滚动的超酷js图片动画特效

    这是一款基于滚动的超酷js图片动画特效.该特效在使用鼠标滚动屏幕时,根据屏幕的当前位置,屏幕上的图片做出相应的动画效果,非常炫酷. 使用方法 HTML结构 CSS样式 // The container ...

  10. html+css+js表白代码,实现打字动画、动态爱心、图片旋转木马特效、下雪特效

    给男朋友准备的520礼物,他觉得太尴尬了,于是我特地把这个项目开源,让大家一起感受一下男票的尴尬,哈哈哈哈哈哈我好恶趣味. 话不多说上代码: 一.动态爱心+打字动画 html部分: <!doct ...

最新文章

  1. 【Google Play】声明广告权限 ( you must declare the AD_ID Permission when your app targets Android 13 )
  2. android sync manager wifi pc,Android SyncManager 实现
  3. 【转载】IIS网站配置不带www域名直接跳转带www的域名
  4. linux ipv4 keepalive,Linux中keepalive的使用
  5. iOS逆向之自动化重签名
  6. Zabbix触发器和监控项设置时间范围.
  7. matlab制作数字滤波器(带通滤波器)
  8. Matlab - 演化博弈论实现
  9. 乒乓球单循环赛_乒乓球淘汰赛制和单循环赛制的比赛方法是什么?
  10. 8Manage助力迈迪思创项目业务一体化
  11. 单片机(嵌入式)程序分层架构
  12. steam怎么解除共享_如何启用Steam家庭共享(及其功能)
  13. 移动端webUI框架(HTML5手机框架)
  14. 苹果台式电脑怎么使用计算机,苹果台式电脑开开不了机怎么办
  15. css筋斗云,JavaScript实现精美个性导航栏筋斗云效果
  16. 单点登录SSO(single sign on)模式(单点登录+权限认证)
  17. 教程丨利用微软官方工具制作U盘安装Win10系统
  18. 计算机桌面怎么全屏显示,如何让电脑显示器屏幕显示全屏
  19. (脑肿瘤阅读笔记:四十六)KIU-Net用于医学图像分割和体积分割的过完备卷积网络架构
  20. C#获取当前时间毫秒值

热门文章

  1. 单片机 MSP430 串口 计算 波特率
  2. Alien Worlds NFT 自动点击游戏教程 (Allen worlds NFT auto click game tutorial)
  3. Markdown写作工具盘点
  4. RecyclerView系列:GridLayoutManager的构造函数中的orientation理解
  5. 神经网络学习笔记4:CPN网络的实现
  6. 【设计】计数(一)基数计数
  7. shopex4.8.5 php5.6,ShopEx(网上商店系统)
  8. PS4 eye camera v2 ROS测试
  9. 安全架构--13--企业资产管理体系建设总结
  10. SQLServer简繁互换