JS实现transform实现扇子效果

2024-09-28 23:01:13

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

使用js画图之圆、弧、扇形

半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA; y = y0+rsinA ,A为弧度样例:http://www.zhaojz.com.cn/demo/draw6.html 一.圆复制代码代码如下: //圆形/椭圆 //dot 圆点 //r 半径 //compressionRatio 垂直压缩比 function drawCircle(dot, r, compressionRatio, data){ var pstart = [dot[0]
JS实现transform实现扇子效果

本文实例为大家分享了JS实现transform实现扇子效果的具体代码,供大家参考,具体内容如下描述: JS面向对象--利用transform实现扇子效果效果: 实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
又一款js时钟!transform实现时钟效果

又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform的使用的思路,transform里有很多变幻属性,而普通的时钟在我心中就是个圆圆的东西,那么是不是可以旋转这个属性(rotate)实现了,它的刻度使用旋转且把旋转点设置在圆心,那不就可以绕着圆心转了吗,而时针它们的底部不是和圆心接触的吗,那么设置时针的底部为旋转点不就OK了,大概的说了说思路.
javaScript+turn.js实现图书翻页效果实例代码

为了实现图书翻页的效果我们在网上可以看到很多教程在这里推荐turn.js 网上的turn.js 有api 不过是英文的很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径对于css 和 js文件不需要过多的解释在这里要注意的是pages文件夹这里个文件夹下放的是需要预览的图片文件
hammer.js实现图片手势放大效果

本文实例为大家分享了hammer.js实现图片手势放大效果的具体代码,供大家参考,具体内容如下 //图片手势放大 var reqAnimationFrame = (function() { return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var el = $('img');
JS+CSS3模拟溢出滚动效果

移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到两个页面都有类似overflow:auto的效果,一般情况下通过css设置是可以实现的(虽说丑了点儿),,但是一旦overflow:auto的元素响应touch事件时就会有诸多不便,例如fullpage中某一元素自滑动,我们可以通过normalScrollElements来使元素滑动的时候不滑动到下一屏,但是在元素滑动到最底部的时候也就不能响应下一屏事件,上滑也是一样,这时候就需要touch事件来响应,
anime.js 实现带有描边动画效果的复选框（推荐）

anime.js anime.js是一个灵活的轻型JavaScript动画库. 它与CSS,个别变换,SVG,DOM属性和JS对象. 特征具体的动画参数具体目标值多个定时值播放控制运动路径在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的标准,变得越来越重要.特别是在一些和用户交互的地方,使用动画能更好的給用户以反馈,提升用户的操作体验
JS实现图片旋转动画效果封装与使用示例

本文实例讲述了JS实现图片旋转动画效果封装与使用.分享给大家供大家参考,具体如下: 核心封装代码如下: //图片动画封装 function SearchAnim(opts) { for(var i in SearchAnim.DEFAULTS) { if (opts[i] === undefined) { opts[i] = SearchAnim.DEFAULTS[i]; } } this.opts = opts; this.timer = null; this.elem = document.
js+SVG实现动态时钟效果

本文实例为大家分享了js+SVG实现动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <meta charset="utf-8"> <head> <title>Analog Clock</title> <script> function updateTime() { var now = new Date(); // 当前时间 var min = now.
使用原生JS实现滚轮翻页效果的示例代码

一.滚轮事件当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 "mousewheel" 事件,而 Firefox 3.5+ 中提供了一个等同的事件:"DOMMouseScroll".与mousewheel事件对应的event对象中我们还会用到另一个特殊属性-wheelDelta属性. 1."m
js+css实现扇形导航效果

本文实例为大家分享了js+css实现扇形导航效果的具体代码,供大家参考,具体内容如下\ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>扇形导航</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%;

JS实现transform实现扇子效果

相关推荐

随机推荐