JS实现transform实现扇子效果


Posted in Javascript onJanuary 17, 2020

本文实例为大家分享了JS实现transform实现扇子效果的具体代码,供大家参考,具体内容如下

描述:

JS面向对象——利用transform实现扇子效果

效果:

JS实现transform实现扇子效果

实现:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
.fan { margin: 0 auto; position: relative; top: 100px; width: 50px;}
.fan-other { margin: 0 auto; position: relative; top: 300px; width: 50px;}
</style>
<body>
  <div class="fan"></div>
  <div class="fan-other"></div>
 
  <script>
  (function(){
    
    // 扇子类
    class Fan {
      // Fan类的构造器,接收传入的参数
      // params selector 容器的选择器
      // params options 一些配置参数
      // options size 尺寸
      // ...
      // void return 
      constructor ( selector, options ) {
        // 扇子容器
        this.selector = selector
        this.wrapper = document.querySelector(selector)
        // 默认配置项
        let _options = {
          size: 'normal' // large
        }
        // 配置项
        this.options = options || _options
        // 扇叶的尺寸
        this.size = {
          width: 50, height: 150
        }
        // 进行初始化操作
        this.init()
      }
      // 初始化函数
      init () {
        // 创建扇叶
        this.createFanBlade()    
      }
      // 创建扇叶
      createFanBlade () {
        // 扇叶的数量 当new时size不为normal时,输出11片扇叶的扇子
        let _bladeNumbers = this.options.size === 'normal' ? 9 : 11;
        let _fragmentStr = '';
        let { width, height } = this.size;
        // 扇叶样式
        let _bladeStyle = {
          width: width + 'px',
          height: height+ 'px',
          position: 'absolute',
          top: 0, left: 0
        }
        for (let i = 0; i < _bladeNumbers; i++) {
          _bladeStyle.background = this.createRandomColor()//背景颜色随机
           _fragmentStr += `<div style="${this.turnStyleToString(_bladeStyle)}"></div>`
        }
        // 放入扇叶
        this.wrapper.innerHTML = _fragmentStr ;
        this.createTransition(_bladeNumbers);
      }
      // 制作动效Style并插入到head中
 
      createTransition (_bladeNumbers) {
        let _result = '<style>';
        _result += `
          ${this.selector} div { transition: all 0.5s; transform-origin: center bottom; }
        `;
        // 0 1 2 3 4 5 6 7 8 角度转化 0-8 中间是0° -70°~70°
        for (let i = 0; i < _bladeNumbers; i++) {
          let _num = (_bladeNumbers - 1) / 2
          let _angle = (i - _num) * 70 / _num
          _result += `
            ${this.selector}:hover div:nth-child(${i+1}){ 
            transform: rotate(${_angle}deg); }
          `
        }
        _result += '</style>'
        document.querySelector('head').innerHTML += _result;
      }
 
      // 转换样式对象为字符串
      turnStyleToString (styleObject) {
        let _result = ''
        for (const key in styleObject) {
        _result += key + ':' + styleObject[key] + ';'
        }
        return _result;
      }
 
      // 随机创建颜色
      createRandomColor () {
        return "#"+(function(color){
          return new Array(7-color.length).join("0")+color;
        })((Math.random() * 0x1000000 | 0).toString(16));
      }
 
    }
 
 
    new Fan('.fan')
    new Fan('.fan-other', {
      size: 'large'
    })
    
  })();
 
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
js实现简单模态窗口,背景灰显
Nov 14 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 #jQuery
浅谈VUE中演示v-for为什么要加key
Jan 16 #Javascript
Vue引入Stylus知识点总结
Jan 16 #Javascript
js实现提交前对列表数据的增删改查
Jan 16 #Javascript
react实现移动端下拉菜单的示例代码
Jan 16 #Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 #Javascript
JS实现简单的表格增删
Jan 16 #Javascript
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
xml和web特殊字符
2009/04/28 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
动态密码技术
2012/10/18 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
大学生自我鉴定
2013/12/16 职场文书
元旦活动感言
2014/03/08 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
北京青年观后感
2015/06/15 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
Java无向树分析 实现最小高度树
2022/04/09 Javascript