css仿遥控器按钮

原创 2018年04月17日 14:54:36

注:本demo在小程序环境中测试,其他h5,pc网页通用,只需将小程序单位和标签名改成通用的即可,并按照自己的需求做适配即可。

大体思路:四个相同的正方形田字形布局,配合旋转属性即可。

html结构

<view class="button-group">
<view class="outter-circle">
<view class="inner-parts brown" bindtap="button" data-type="volAdd">
<text class="rotate">+</text>
</view>
<view class="inner-parts silver" bindtap="button" data-type="chaAdd">
<text class="rotate">+</text>
</view>
<view class="inner-parts blue" bindtap="button" data-type="chaDes">
<text class="rotate">-</text>
</view>
<view class="inner-parts gold" bindtap="button" data-type="volDes">
<text class="rotate">-</text>
</view>

<view class="inner-circle" bindtap="button" data-type="ok">
<text class="ok rotate">ok</text>
</view>
</view>
</view>


css样式

.button-group {
padding-top: 20rpx;
width: 300rpx;
height: 300rpx;
background-color: pink;
}

.outter-circle {
position: relative;
margin-left: 10rpx;
width: 280rpx;
height: 280rpx;
background-color: lightcyan;
border-radius: 100%;
overflow: hidden;
transform-origin: center;
transform: rotate(45deg);
}

.inner-parts {
float: left;
width: 140rpx;
height: 140rpx;
line-height: 140rpx;
text-align: center;
}

.silver {
background-color: silver;
}

.gold {
background-color: gold;
}

.blue {
background-color: blue;
}

.brown {
background-color: brown;
}

.inner-circle {
position: absolute;
margin-top: 70rpx;
margin-left: 70rpx;
width: 140rpx;
height: 140rpx;
line-height: 140rpx;
text-align: center;
border-radius: 100%;
background-color: lightblue;
}

.rotate {
display: inline-block;
transform: rotate(-45deg);
}

注:文字区域若不inline-block,旋转属性将不生效!

按钮点击事件

button: function(e) {
var buttonType = e.currentTarget.dataset.type
console.log(buttonType)
switch (buttonType) {
case 'chaAdd':
console.log('backward the channel')
break
case 'chaDes':
console.log('forward the channel')
break
case 'volAdd':
console.log('strengthen the volumn')
break
case 'volDes':
console.log('weaken the volumn')
break
default:
console.log('ok')
}
}


运行效果


明盒开发

明盒开发未经允许,严禁转载本栏目内容本文经许可转载自软件工程专家网www.21cmm.com,未经CSDN许可,请勿随便转载,谢谢合作(一) 明盒结构  明盒定义了实现转换状态盒功能的过程。明盒和相应...
  • gigix
  • gigix
  • 2002-03-14 10:15:00
  • 1694

android 自定义控件--(圆盘形菜单控件)

思路原理: 定一个原点和一个半径,圆的四周均匀分布每个菜单。为了方便计算,菜单的坐标用度数表示,然后转化为极坐标计算。定某个点为起始点,根据总菜单数确定每个点增加的度数,然后依次确定每个点的度数,也...
  • zhouzhiwengang
  • zhouzhiwengang
  • 2013-10-28 11:53:19
  • 850

仿遥控器菜单圆盘

仿遥控器菜单圆盘1.效果2.github地址github地址 https://github.com/caixingcun/CopyMenu3.前言之前有一家面试,有这么一个需求,问我需要如何实现这么...
  • jiushiwo12340
  • jiushiwo12340
  • 2017-07-22 22:31:31
  • 263

Android笔记--自定义控件仿遥控器的圆形上下左右OK圆盘按钮

上面就是几张预览图!代码在最底下 主要就两个步骤,画图、监听点击 1、整个控件基本上是一步步画出来的,重写onDraw方法开始for循环画扇形出来,画扇形的时候同时画扇形内的图标,扇形画完了之后画...
  • qq_33601179
  • qq_33601179
  • 2017-03-10 14:15:33
  • 1440

Android 自定义电视遥控器控件

自定义电视遥控器圆形按钮 点击打开链接
  • q957789074
  • q957789074
  • 2016-11-25 16:30:28
  • 535

Android_自定义遥控器按钮

源码地址https://github.com/GuoFeilong/RemoteControllerDemo来一波star谢谢HI,一辆开往幼儿园的小车,即将到站.昨天偶然看见群里哥们,抛出一张效果图...
  • givemeacondom
  • givemeacondom
  • 2017-09-07 11:32:15
  • 342

html/css 写出类似遥控器方向键,上下左右键

最近要做一个摄像头交互的功能,其中有一个功能是通过后台管理调用海康摄像头sdk去控制摄像头上下左右摇动。整理了一个html和css画出四个方向键UI的代码。效果图和代码如下:(欢迎交流)效果图:htm...
  • kangjianqiang1
  • kangjianqiang1
  • 2018-02-27 18:24:32
  • 181

Css 仿iOS的开关按钮

用Css仿iOS的开关按钮,微信风格
  • voidmain_123
  • voidmain_123
  • 2016-08-24 17:09:51
  • 1805

仿悟空遥控器控制页面

在使用悟空遥控器的时候,发现在遥控器页面的中心控制器的设计很巧妙。如果使用xml layout布局的话,使用FrameLayout/RelativeLayout来处理5个按键(上下左右以及中间确认键)...
  • zhengdan66
  • zhengdan66
  • 2016-05-29 10:51:56
  • 1484

android自定义View(五)打造自己的遥控器菜单

  • 2015年12月14日 00:05
  • 1.6MB
  • 下载
收藏助手
不良信息举报
您举报文章:css仿遥控器按钮
举报原因:
原因补充:

(最多只允许输入30个字)