使用工具: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. JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
  2. RCNN SPP_net
  3. KMP算法的来龙去脉
  4. 以JSONobject形式提交http请求
  5. T-SQL高级查询语句
  6. HAL中通过jni调用java方法的问题
  7. @WebListener 注解方式实现监听(eclipse和idea)
  8. Toml :设置策略配置文件
  9. (转)DeepMind 的下一场博弈:用机器学习颠覆资产管理?
  10. Rabbit MQ 基础
  11. MaxScript调用IGame
  12. 古董万年历升级WiFi授时 STM32+ESP8266
  13. Julia 数据科学应用
  14. 红米越卖越贵,消费者如今总算有了新选择,魅蓝回来了
  15. v7000更换电池步骤_[原创]IBM V7000 SVC更换已经告警的UPS电池详细步骤
  16. 自建服务器系列-0元搭建linux服务器(windows笔记本)
  17. java交换kv的值_以.kv语言描述OSC
  18. 内存调试: GC_CONCURRENT freed
  19. python项目实例源码哪里下载-Python从入门到项目实践 PDF 全彩带源码版
  20. 微信如何注册小号?一个手机号注册两个微信账号?图文教学

热门文章

  1. 新浪微博共享登录后无法退出切换账号问题解决
  2. 【目标检测适用】Pascal Voc(07+12)联合训练并在07上测试
  3. php shopex,shopex官网 用PHP为SHOPEX增加日志功能代码
  4. 吐个槽:bose的售后真心差劲!愧对这个顶级音响产品!
  5. pytorch训练过程中内存一直慢慢增长直到爆
  6. JAVA_SE实现桌面化功能
  7. SpringMVC复习
  8. 国家开放大学2021春1135液压气动技术题目
  9. 量化投资之工具篇一:Backtrader从入门到精通(7)-Indicator类源代码解读(2)
  10. 计算机无法打开浏览器,Internet选项打不开怎么办?IE浏览器internet选项无法打开解决方法...