Html - 仿Ios assistiveTouch 悬浮辅助球工具

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .assistive-wrap{
                        width: 58px;
                        height: 58px;
                        position: fixed;
                        top: 50%;
                        margin-top: -29px;
                        left: 1px;
                    }

                    .assistive-touch{
                        width: 100%;
                        height: 100%;
                        background: #343434;
                        border-radius: 10px;
                        opacity: .3;
                        position: relative;
                    }

                    .assistive-touch:before, .assistive-touch:after, .assistive-touch span{
                        content: ‘‘;
                        position: absolute;
                        border-radius: 100%;
                        box-shadow: 0 0 2px rgba(30, 30, 30, .5);
                        display: block;
                        background: rgba(255, 255, 255, .6);
                    }

                    .assistive-touch:before{
                        width: 42px;
                        height: 42px;
                        left: 8px;
                        top: 8px;
                        opacity: .5;
                    }

                    .assistive-touch span{
                        width: 34px;
                        height: 34px;
                        left: 12px;
                        top: 12px;
                    }

                    .assistive-touch:after{
                        width: 26px;
                        height: 26px;
                        left: 16px;
                        top: 16px;
                        background: #fff;
                    }
        </style>
    </head>

    <body>
        <div class="assistive-wrap">
            <div class="assistive-touch">
                <span></span>
            </div>
        </div>
    </body>

</html>
时间: 2024-08-11 09:50:01

Html - 仿Ios assistiveTouch 悬浮辅助球工具的相关文章

android 仿ios 对话框已封装成工具类

对话框 在android中是一种很常见的交互提示用户的方式,但是很多产品狗都叫我们这些做android的仿ios,搞的我们android程序员很苦逼,凭什么效果老是仿ios,有没有一点情怀,不过ios在界面封装确实比android好很多,吐槽完毕,比如一种很常见的场景就是在没网的情况下 提示用户,看效果图: 在很多界面都要有提示,那么就自然而然想到了封装,而不至于在每个页面都重写一篇,话不多说直接上代码 CommonDialog.java public class CommonDialog ex

自定义水波球清理内存的悬浮窗小工具

一.概述 现在一些手机管家都会有一个用来清理内存的悬浮窗小工具,感觉挺实用的,就自己做了一个.首先介绍一下这个工具的功能,除了可以清理内存,还有调节手机屏幕亮度.手电筒.无线网.移动数据.蓝牙.GPS开关的功能.先上图,感受一波: 清理手机内存     一些常用功能的开关 二.功能实现 1.悬浮窗     MainActivity只有两个按钮,控制悬浮窗的打开和关闭.这里我是用Service去控制的.下面我把FloatWindowService的代码贴出来: public class Float

前端心得---仿IOS拾取器控件(转轮控件)

希望做一个类似IOS拾取器的控件,在IOS上该控件的效果是这样的:,我也把该效果称之为为轮子效果. 要实现这个效果,能够用到的技术点非常简单,无非是transform的translate3d和rotate,不过要想很好的实现,还要建立一个精确的数学模型,来解决如何[摆放]的问题.特别是这个效果不是静态的,需要满足鼠标滑动的时,这个轮子要转起来,这就需要仔细思索了.当然,在最开始重点还是要搞清楚自变量是什么.因变量是什么.它们之间的关系是什么以及该需求的一些性质.找到了好的性质,可以减轻工作量,并

在uwp仿IOS的页面切换效果

有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画.导航到新页面时,使用页面前进的动画. UWP自带很多切换效果,位于 Windows.UI.Xaml.Media.Animation 中.与苹果的切换效果最接近的是 PaneThemeTransition (而不是EdgeUIThemeTransition). PaneThemeTransition

Android仿IOS回弹效果 ScrollView回弹 总结

Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  需要仿IOS 下拉回弹的效果 , 我在网上搜了很多 大多数都是拿scrollview 改吧改吧 试了一些  发现总有点小问题 下面的代码是我对大家发布的做了点小修改   觉得没太大问题 package com.example.myscrollview; import android.content.Context; import android.graphics.Rect; import android.util

iOS开发-博客导出工具开发教程(附带源码)

前言: 作为一名学生, 作为一名iOS开发学习者, 我个人浏览信息包括博客, 更多的选择移动终端.然而, csdn并没有现成的客户端(不过有个web版的). 之前曾经看到一款开源的导出工具, 但是它是基于Windows平台的.导出的也仅仅是PDF格式.而且, 对于文章的导出, 需要精确URL.无法做到边浏览别导出. 另外, 我想实现的是, 可以在没有网络的情况下, 浏览自己收藏的文章.并且, 对于自己收藏的文章, 可以分类管理. 最关键的是, 对于自己的文章, 可以做一个备份.我曾经遇到过这样一

20个可以帮你简化iOS app开发流程的工具

这里推荐20个可以帮你简化iOS app开发流程的工具.很多开发者都使用过这些工具,涉及原型和设计.编程.测试以及最后的营销,基本上涵盖了整个开发过程. 原型和设计 有了一个很好的创意后,你要做的不是立刻编程,而是设计UI和创建原型,这样你才能知道app如何运行,根据用户体验需要做哪些调整. App Cooker AppCooker 不仅是一个创建原型的优秀工具,它提供的许多功能还可以帮助你将程序发布到App store中.它集成了Dropbox,Box.net和photo roll,你可以直接

IOS开发之网络开发工具

IOS开发之网络开发工具 做移动端开发  经常会涉及到几个模块:1.网络检测   2.网络请求get和post请求  3.文件上传  4.文件下载   5.断点续传 现在将这些一一分享给大家 ,也欢迎大家一起学习和讨论  本例子采用AFNetWorking框架 网络检测: #pragma mark - Reachability Management (iOS 6-7) //网络监听(用于检测网络是否可以链接.此方法最好放于AppDelegate中,可以使程序打开便开始检测网络) - (void)

WEB开发框架系列教程 (零)辅助开发工具下载

华东信息辅助开发工具下载 下面会通过辅助工具开展本系列教程 (一).快速创建解决方案 (二).功能页面开发(1)建表,不用配置,不用开发 完成页面功能 (三).功能页面开发(2)建表,配置页面,不用开发 完成页面功能 (四).功能页面开发(3)自主开发页面(借助辅助开发工具完成)零编码实现指定表的增删改查,然后在代码基础上丰富调整 (五).页面代码分析 (六).下拉框资源定义 .... 待续 如果需要请联系QQ:93346562