JavaScript+CSS相册特效实例代码


Posted in Javascript onSeptember 07, 2017

JavaScript+CSS相册特效实例代码

嗯 就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式。

设计:

观察一张图片的变化,发现:

1、图片缩放(随机,并且不是同时运动)

      1、从大到小

       2、从小到大,透明度从1到0(在第一步运动完成后立马开始)

2、图片旋转(随机,并且不是同时运动的。需要在全部运动走完以后开始)

3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时间用random随机生成即可。

4. 中间需要用到自执行函数,因为setTimeout无视for循环的i,所以每次延时器运行的时候i可能都出错,用自执行函数保存i的每一次值。

5. 转换期间按钮的div是不能点击的,需要标记和判断。

6.运动共有两个,缩放和旋转,注意缩放全部结束才能开始旋转,这里也要处理好。

笔记:

scale是缩放
transition 过渡,延迟
子函数修改父亲的值,就是闭包
JavaScript+CSS相册特效实例代码
自执行函数 这里主要用来保存i的每一次值
如果直接加定时器,就不管外面循环,1s后才执行,这时的i都不知道到哪里了,可能越界
JavaScript+CSS相册特效实例代码
Math.random()产生的值是setTimeout的一个参数,延迟的时间
setTimeout延迟时间也与电脑卡影响
transitionend只要过渡了就会执行,它是根据 样式来计算的
JavaScript+CSS相册特效实例代码
缩放和透明都会触发transitionend
call()改变this指向的对象

然后就直接实现了,在加载页面的时候就运行这个特效。

补上中间查到的一些资料:

1.CSS3 opacity 属性:

描述
value 指定不透明度。从0.0(完全透明)到1.0(完全不透明)
inherit Opacity属性的值应该从父元素继承


2.HTML DOM scale() 方法:

参数

参数 描述
sx, sy 水平和垂直的缩放因子。
描述

scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如,传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍,而高度变为原来的 1/2。指定一个负的 sx 值,会导致 X 坐标沿 Y 轴对折,而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。

这里我直接一个参数就是同时缩小高度和宽度

3.

div是块标签,现在这种情况此div的标签会被里面图片高度自己撑起来,img标签都是默认向左漂浮的,刚好每行10个每个80px
margin: 0 auto是margin: 0 auto 0 auto的简写,也就是左右自动居中,至于为什么没有紧挨着上面的div,这个应该是上面那个margin: 80px auto,已经设置了跟下面的div外边距80px距离

btn的高度没有设置,靠font撑的

剩下就是代码了,注释很详细,回调函数很多。。:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  /*图片容器整体样式,左右居中 视角景深800px */
  #imgWrap{
  width: 800px;
  height: 400px;
  margin: 80px auto;
  perspective: 800px;
  }

  /*左对齐,高宽*数量=整体div*/
  #imgWrap img{
  float: left;
  width: 80px;
  height: 80px;
  }

  #btn{
  width: 100px;
  /*height: 40px 这里不定义就是跟font大小一样*/
  background: rgb(0,100,0);
  padding: 0 20px;
  /*font-size 和 line-height 中可能的值。*/
  font: 16px/40px "微软雅黑";
  color: #fff;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #000;
  cursor: pointer;
  }
 </style>
 <script>
  /*
  * 1、图片缩放(随机,并且不是同时运动)
  * 1、从大到小
  * 2、从小到大,透明度从1到0(在第一步运动完成后立马开始)
  *
  * 2、图片旋转(随机,并且不是同时运动的。需要在全部运动走完以后开始)
  */

  window.onload=function(){
  var btn=document.getElementById("btn");
  // 选择所有元素
  var imgs=document.querySelectorAll("img");
  var endNum=0; //它代表图片运动完成的数量
  var canClick=true; //它代表用户能否再次点击

  btn.onclick=function(){
   if(!canClick){
   return; //以下的代码不要走了
   }
   canClick=false;


   for(var i=0;i<imgs.length;i++){
   (function(i){
    setTimeout(function(){
    /*imgs[i].style.transition='100ms';
    imgs[i].style.transform='scale(0)';
    imgs[i].style.opacity='0';

    imgs[i].addEventListener('transitionend',function(){
     console.log(1);
    });*/

    motion(imgs[i],'50ms',function(){
     this.style.transform='scale(0)';
    },function(){
     motion(this,'1s',function(){
     this.style.transform='scale(1)';
     this.style.opacity='0';
     },function(){
     //在这里表示图片缩放的运动已经全部完成了,接着走第二个运动

     endNum++;
     if(endNum==imgs.length){
      //所有的运动都完成了
      //console.log('所有的运动都完成了')
      rotate();
      //endNum=0;
     }
     });
    });
    },Math.random()*1000);
   })(i);
   }
  };


  //旋转功能
  function rotate(){
   for(var i=0;i<imgs.length;i++){
   //给运动来一下初始化
   imgs[i].style.transition='';
   /*imgs[i].style.opacity=1;*/
   imgs[i].style.transform='rotateY(0deg) translateZ(-'+Math.random()*500+'px)';

   //运动来了,自执行函数
   (function(i){
    setTimeout(function(){
    motion(imgs[i],'2s',function(){
     this.style.opacity=1;
     this.style.transform='rotateY(-360deg) translateZ(0)';
    },function(){
     endNum--; //因为在上次运动结束的时候,endNum的值已经加到了50了
     //console.log(endNum);
     if(endNum==0){
     //所有的运动都完成了
     canClick=true;
     //endNum=0
     }
    });
    },Math.random()*1000);
   })(i);
   }
  }

  //运动函数
  function motion(obj,timer,doFn,callBack){
   //motion(运动对象,运动时间(字符串+单位),运动属性(函数),运动结束后的回调函数)
   obj.style.transition=timer;
   doFn.call(obj);//改变对象

   var end=true; //用来知道过渡有没有完成一次

   //结束事件处理函数
   function endFn(){
   if(end){
    //callBack&&callBack.call(obj);
    if(callBack){
    callBack.call(obj);
    }

    end=false; //改成false,下次就不会走这个if了
   }

   obj.removeEventListener('transitionend',endFn); //结束后就把这个事件取消掉,要不它会一直带在身上
   }

   obj.addEventListener('transitionend',endFn);
  }
  };
 </script>
 </head>
 <body>
 <div id="imgWrap">
  <img src="images/1.jpg" alt="" />
  <img src="images/2.jpg" alt="" />
  <img src="images/3.jpg" alt="" />
  <img src="images/4.jpg" alt="" />
  <img src="images/5.jpg" alt="" />
  <img src="images/6.jpg" alt="" />
  <img src="images/7.jpg" alt="" />
  <img src="images/8.jpg" alt="" />
  <img src="images/9.jpg" alt="" />
  <img src="images/10.jpg" alt="" />
  <img src="images/11.jpg" alt="" />
  <img src="images/12.jpg" alt="" />
  <img src="images/13.jpg" alt="" />
  <img src="images/14.jpg" alt="" />
  <img src="images/15.jpg" alt="" />
  <img src="images/16.jpg" alt="" />
  <img src="images/17.jpg" alt="" />
  <img src="images/18.jpg" alt="" />
  <img src="images/19.jpg" alt="" />
  <img src="images/20.jpg" alt="" />
  <img src="images/21.jpg" alt="" />
  <img src="images/22.jpg" alt="" />
  <img src="images/23.jpg" alt="" />
  <img src="images/24.jpg" alt="" />
  <img src="images/25.jpg" alt="" />
  <img src="images/26.jpg" alt="" />
  <img src="images/27.jpg" alt="" />
  <img src="images/28.jpg" alt="" />
  <img src="images/29.jpg" alt="" />
  <img src="images/30.jpg" alt="" />
  <img src="images/31.jpg" alt="" />
  <img src="images/32.jpg" alt="" />
  <img src="images/33.jpg" alt="" />
  <img src="images/34.jpg" alt="" />
  <img src="images/35.jpg" alt="" />
  <img src="images/36.jpg" alt="" />
  <img src="images/37.jpg" alt="" />
  <img src="images/38.jpg" alt="" />
  <img src="images/39.jpg" alt="" />
  <img src="images/40.jpg" alt="" />
  <img src="images/41.jpg" alt="" />
  <img src="images/42.jpg" alt="" />
  <img src="images/43.jpg" alt="" />
  <img src="images/44.jpg" alt="" />
  <img src="images/45.jpg" alt="" />
  <img src="images/46.jpg" alt="" />
  <img src="images/47.jpg" alt="" />
  <img src="images/48.jpg" alt="" />
  <img src="images/49.jpg" alt="" />
  <img src="images/50.jpg" alt="" />
 </div>
 <div id="btn">点击查看效果</div>
 </body>
</html>

以上这篇JavaScript+CSS相册特效实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype ObjectRange对象学习
Jul 19 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 #Javascript
基于Cookie常用操作以及属性介绍
Sep 07 #Javascript
基于require.js的使用(实例讲解)
Sep 07 #Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 #Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 #jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 #jQuery
You might like
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php上传文件问题汇总
2015/01/30 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
Ajax 数据请求的简单分析
2011/04/05 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python生成随机图形验证码详解
2017/11/08 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
numpy.where() 用法详解
2019/05/27 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
学生党员思想汇报
2013/12/28 职场文书
公司年会演讲稿范文
2014/01/11 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
工作总结与自我评价
2014/09/18 职场文书
社会实践活动报告
2015/02/05 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
廉政党课工作报告案例
2019/06/21 职场文书