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 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
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
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
JQuery toggle使用分析
2009/11/16 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
jquery实现选项卡切换代码实例
2019/05/14 jQuery
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
Python 列表list使用介绍
2014/11/30 Python
Python实现队列的方法
2015/05/26 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
PyQt5实现登录页面
2020/05/30 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
2014年小班元旦活动方案
2014/02/16 职场文书
初中班主任评语大全
2014/04/24 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
旷课检讨书500字
2014/10/14 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python