zoukankan      html  css  js  c++  java
  • javascript画正弦曲线

    主要运用的就是css的绝对定位,原理就是用很多的小div拼成曲线图

    html

    <div id="context">
        <div id="x-coordinate">
            <div id="x-arrow"></div>
        </div>
        <div id="y-coordinate">
            <div id="y-arrow"></div>
        </div>
    </div>    

    css

    #context{
        width:500px;
        height:320px;
        margin:150px auto;
        position:relative;
    }
    #x-coordinate,#y-coordinate{
        position:absolute;
        left:0;
        background-color:#0000FF;
        z-index:1000;
    }
    #x-coordinate{
        width:500px;
        height:1px;
        top:160px;
    }
    #x-arrow,#y-arrow{
        width:0px;
        height:0px;
        border:5px solid transparent;
        position:absolute;
    }
    #x-arrow{
        border-left-color:#0000FF;
        right:-5px;
        top:-5px;
    }
    #y-arrow{
        border-bottom-color:#0000FF;
        left:-5px;
        top:-5px;
    }
    #y-coordinate{
        width:1px;
        height:320px;
        top:0;
    }
    .metaDiv{
        width:1px;
        height:240px;
        border-top:2px solid #0000FF;
    }

    js

    var metaRadian=(Math.PI*2)/450;
    var amplitude=120;
    var metaDivs='';
    var context=document.getElementById("context");
    for(var i=0,len=450;i<len;i++){
        var top_offset=160-Math.ceil(Math.sin(i*metaRadian)*120);
        metaDivs+="<div class='metaDiv' style='position:absolute;left:"+i+"px;top:"+top_offset+"px'></div>";
    }
    context.innerHTML+=metaDivs;
  • 相关阅读:
    CentOS 7 虚拟机的安装
    2 MySQL rpm
    01-在实体类上加了lombok的@Data注解
    02-myBatisPlus的wrapper接口的使用
    2 MySQL rpm 安装 --下载
    1-MySQL介绍
    MySQL的不归路
    电脑型号4 1500 内存大 机械大硬盘
    电脑型号3 1200 大硬盘
    电脑概览 2 1200 固态SSD
  • 原文地址:https://www.cnblogs.com/ckzhou/p/4158386.html
Copyright © 2011-2022 走看看