原生JS实现图片网格式渐显、渐隐效果


Posted in Javascript onJune 05, 2017

先给出效果图:

原生JS实现图片网格式渐显、渐隐效果原生JS实现图片网格式渐显、渐隐效果

写的小组件支持图片的渐显、渐隐,并且可以是有序、随机两种方式。

我采用的原型是属性写在构造函数内,方法写在原型对象内。方法写构造函数内有个问题,就是每次调用这个方法就相当于重新实例化一次,举个粟子:

实现网格效果的原理上是将读取图片的宽高,按照设定的参数,分成等高宽的网格(我用的span标签表示的网格),网格利用定位铺满整个图片,每个网格的背景图都是原图片,原理同sprite,利用background-position属性改变显示区域。接下来就是按照设定的顺序实现渐显或渐隐。渐显或渐隐用的是JS的animation属性和CSS3的animation属性在属性值上有所区别,这次使用也才知道JS的animation属性里有个animationFillMode(规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。)属性值。

我绑定的事件是点击,完全可以用其他事件或页面加载触发。我的代码稍加改动就可以实现网格式轮播图。

下面给出源代码:

<!doctype html>
<head>
<title>网格效果</title>
<style>
  @charset "utf-8";
  /*css reset*/
  html{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}
  body{-webkit-overflow-scrolling:touch;margin:0;}
  ul{margin:0;padding:0;list-style:none;outline:none;}
  dl,dd{margin:0;}
  a{display:inline-block;margin:0;padding:0;text-decoration:none;background:transparent;outline:none;color:#000;}
  a:link,a:visited,a:hover,a:active{text-decoration:none;color:currentColor;}
  a,dt,dd{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
  img{border:0;}
  p{margin:0;}
  input,button,select,textarea{margin:0;padding:0;border:0;outline:0;background-color:transparent;}
  /*css*/
  .origin-pic {
    display: inline-block;
    width: 200px;
    height: 200px;
  }
  .grid-area {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
  }
  .grid {
    position: absolute;
  }
  #img1 {
    opacity: 1;
    width: 200px;
    height: 200px;
  }
  @keyframes fadeout{
    0% {opacity: 1}
    100% {opacity: 0}
  }
  @keyframes fadein{
    0% {opacity: 0}
    100% {opacity: 1}
  }
</style>
</head>
<body>
<div>
  <img class="origin-pic" src="./pic.jpg" />
</div>
<div id="grid_area" class="grid-area">
  <img id="img1" src="./pic.jpg" />
</div>
<script>
var gridSetting = {
  'cell': 10, // 行、列数量
  'mode': 'fadeout', // 备选参数: fadeout, fadein
  'sort': 'random', // 备选参数: inturn, random
  'num': 1, // 每次发生动作的网格数,目前只支持1
  complete: function() { // 事件完成时的回调函数
    console.log('ok!');
  }
};
var img1 = document.getElementById('img1');
(function(doc, setting, ele) {
  var defaults = {
    'speed': 20,
  };
  function Grid(ele) {
    this.ele = ele;
    this.settings = Object.assign({}, setting, defaults);
  }
  Grid.prototype = {
    constructor: Grid,
    // 构建UI
    _create: function() {
      var img = this.ele,
        settings = this.settings,
        cell = settings.cell,
        imgWidth = img.width,
        imgHeight = img.height,
        gridWidth = imgWidth / cell, // 每个网格宽度
        gridHeight = imgHeight / cell, // 每个网格高度
        currentTop = 0,
        currentLeft = 0,
        fragment = doc.createDocumentFragment(),
        i = 0,
        gridArr = [];
      img.style.display = 'none';
      for (; i < cell * cell; i++) {
        var spanNode = doc.createElement('span');
        spanNode.setAttribute('id', i);
        spanNode.style.cssText +=  'position: absolute;' +
                      'top: ' + currentTop + 'px;' +
                      'left: ' + currentLeft + 'px;' +
                      'margin: 0;' +
                      'padding: 0;' +
                      'width: ' + gridWidth + 'px;' +
                      'height: ' + gridHeight + 'px;' +
                      'opacity:' + settings.opacity + ';' +
                      'background: url('+ img.src + ');' +
                      'background-size: ' + imgWidth + 'px ' + imgHeight + 'px;' +
                      'background-position: -' + currentLeft + 'px -' + currentTop + 'px;';
        if (currentLeft < (imgWidth - gridWidth)) {
          currentLeft += gridWidth;
        } else {
          currentLeft = 0;
          currentTop += gridHeight;
        }
        fragment.append(spanNode);
        gridArr.push(i);
      }
      this.gridArr = gridArr;
      doc.getElementById('grid_area').append(fragment);
    },
    // 渐显、渐隐
    _fade: function() {
      var gridArr = this.gridArr,
        cloneArr = gridArr.slice(0),
        length = gridArr.length,
        settings = this.settings,
        sort = settings.sort,
        i = 0;
      switch(settings.mode) {
        case 'fadeout':
          if (sort == 'inturn') {
            // 按顺序渐隐
            var timer = setInterval(function() {
              doc.getElementById(gridArr[i]).style.animation = "fadeout 1s forwards";
              i++;
              if (i >= settings.cell * settings.cell) {
                clearInterval(timer);
                settings.complete();
              }
            }, settings.speed)
          } else if (sort == 'random') {
            // 随机渐隐
            var timer = setInterval(function() {
              i = cloneArr.splice(Math.random() * length--, 1);
              doc.getElementById(gridArr[i]).style.animation = "fadeout 1s forwards";
              if (length == 0) {
                clearInterval(timer);
                settings.complete();
              }
            }, settings.speed)
          }
          break;
        case 'fadein':
          if (sort == 'inturn') {
            // 按顺序渐渐显
            var timer = setInterval(function() {
              doc.getElementById(gridArr[i]).style.animation = "fadein 1s forwards";
              i++;
              if (i >= settings.cell * settings.cell) {
                clearInterval(timer);
                settings.complete();
              }
            }, settings.speed)
          } else if (sort == 'random') {
            // 随机渐显
            var timer = setInterval(function() {
              i = cloneArr.splice(Math.random() * length--, 1);
              doc.getElementById(gridArr[i]).style.animation = "fadein 1s forwards";
              if (length == 0) {
                clearInterval(timer);
                settings.complete();
              }
            }, settings.speed)
          }
          break;
        default:
          console.log('配置错误!');
      }
    },
    _checkMode: function() {
      if (this.settings.mode == 'fadein') {
        this.settings.opacity = 0;
      } else {
        this.settings.opacity = 1;
      }
    },
  };
  var gridArea = doc.getElementById('grid_area');
  gridArea.addEventListener('click', function() {
    var event = new Grid(ele);
    event._checkMode();
    event._create();
    event._fade();
  }, false);
})(document, gridSetting, img1);
</script>
</body>
</html>

以上所述是小编给大家介绍的原生JS实现图片网格式渐显、渐隐效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JavaScript中对象介绍
Dec 31 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
Node.js开发第三方微信公众平台
Jun 05 #Javascript
js自定义Tab选项卡效果
Jun 05 #Javascript
纯js实现动态时间显示
Sep 07 #Javascript
深入理解Angular.JS中的Scope继承
Jun 04 #Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 #Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 #Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 #Javascript
You might like
php查看session内容的函数
2008/08/27 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
js原型链原理看图说明
2012/07/07 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
vue实现选中效果
2020/10/07 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
详解Python中dict与set的使用
2015/08/10 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
经理管理专业自荐信范文
2013/12/31 职场文书
青年文明号口号
2014/06/17 职场文书
青年志愿者活动感想
2015/08/07 职场文书
八年级作文之感恩
2019/11/22 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android