HTML操作杆（360度、四方向，八方向）

最新推荐文章于 2023-03-16 17:40:32 发布

VIP文章「已注销」

最新推荐文章于 2023-03-16 17:40:32 发布

阅读量2.5k

点赞数 1

分类专栏： js 文章标签： javascript jquery css html5 html

本文链接：https://blog.csdn.net/programminghkl/article/details/104866244

版权

前言

之前作品里面有个需求，需要制作一个HTML浏览器中的操作杆。在网上查找资料的时候，发现相关的实现代码很少，很多都需要依赖各种js包，极其麻烦。无奈自己研究了一个，拿出来给大家提供参考。

操作杆效果

joystick效果

注意：这个操作盘只能在手机端使用（因为手机端有touch事件），如果gif图片效果无法满足你的好奇心，可以使用手机访问网址，获得第一手的体验。

正文

咱就直接上代码吧，大家也好直接拿来借鉴 >.<。你也可以访问此网址，右键查看源代码（手动狗头）。

注意：如果自己使用的话，需要引入一个jquery-1.11.0.min.js文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 设置视口，内容宽度等于用户设备宽度，用户不能缩放 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>HTML 360度操作杆</title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <style>
        * {
            /* 清除默认样式*/
            margin: 0;
            padding: 0;
        }
        html {
            /*用于 获取 屏幕的可视宽高，通过js获取html的属性即可*/
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        body {
            /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            color: #FFF;
            font-size: 28px;
            background-color: black;
        }
        .drag{
            /* 拖动区域，在js里设置宽高 */
            right: 0;
            bottom: 0;
            position: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .joystick{
            left: 50%;
            bottom: 0;
            position: absolute;
            background-color: rgba(200,200,200,0.3);    /* 操作杆背景颜色*/
            border: solid 0.5rem rgba(200,200,200,0.1); /* 操作杆边框颜色*/
            border-radius: 50%;
            /* 用户不可选择复制控件文本 */
            -webkit-touch-callout:none;  /*系统默认菜单被禁用*/

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
HTML操作杆（360度、四方向，八方向）

前言之前作品里面有个需求，需要制作一个HTML浏览器中的操作杆。在网上查找资料的时候，发现相关的实现代码很少，很多都需要依赖各种js包，极其麻烦。无奈自己研究了一个，拿出来给大家提供参考。操作杆效果注意：这个操作盘只能在手机端使用（因为手机端有touch事件），如果gif图片效果无法满足你的好奇心，可以使用手机访问网址，获得第一手的体验。正文咱就直接上代码吧...
复制链接

扫一扫