Skip to content

xzhuz/xue-touch-circle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Xue-Touch-Circle

一款的辅助触控插件。

Preview

DEMO touch-previe

Usage

简单写一个教程

第一步: 添加元素

<body></body>添加:

<div class="moon-menu">
    <div class="moon-menu-items" id="moonMenu">
        <span class="moon-menu-item pl-6 cst-icon icon-up"> </span>
        <span class="moon-menu-item pl-6 cst-icon icon-down"> </span>
        <span class="moon-menu-item pl-6 cst-icon icon-toc"></span>
    </div>

    <div class="moon-menu-button">
        <svg class="moon-menu-bg">
            <circle class="moon-menu-cricle" cx="50%" cy="50%" r="44%"></circle>
            <circle class="moon-menu-border" cx="50%" cy="50%" r="48%"></circle>
            <g class="moon-dot">
                <circle r=".2rem" cx="0" cy="-.8rem"></circle>
                <circle r=".2rem"></circle>
                <circle r=".2rem" cx="0" cy=".8rem"></circle>
            </g>
        </svg>
        <div class="moon-menu-content">
            <div class="moon-menu-icon"></div>
            <div class="moon-menu-text"></div>
        </div>
    </div>
</div>

第二步:引入js

<script src="http://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hshanx/xue-touch-circle@latest/moon.js"></script>

第三步:引入css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hshanx/xue-touch-circle@latest/index.min.css">

其他: 宽屏的情况下隐藏目录按钮

@media only screen and (min-width: 1360px) {
    .icon-toc {
        display: none !important;
    }
}