对于每一位设计师的日常工作来说,如何有效阐述自己的方案是非常关键的一步,如果只是一张原型图方案,无论标注得多么清楚,都会有一定的沟通理解成本,所以通常都会需要一个原型demo来帮助大家对方案进行直观的演示,以此阐明方案的各类细节、操作体验等等。为了帮助大家在移动互联网时代,快速、简单地制作原型demo,Demoo应运而生。 Demoo是基于web设计搭建的一款在浏览器内进行可视化操作的工具。通过上传平面稿件,用手势或触点热区的方式把界面关系连接起来,加入连接转场特效,输出一份仿真APP的、可体验操作的设计方
在阅读本文之前,建议先阅读之前的一篇文章:“面向设计的半封装web组件开发”,便于理解文章的一些解惑。 一、现状 1. 前端发展现状 前端这几年的发展都是有目共睹的,然而,如果按照已经落地投入实践的标准梳理下,会发现,基本上都是偏后的JS开发层面的,比方说Node.js下的前后端分离,MV*库,React.js,各种包管理工具及前端集成解决方案等。 而往前,Shadow DOM, Web Components规范和标准虽然也出现了,给大家看到了方向和未来,但由于兼容性的问题(参见下表),或者可能缺乏优秀
百度分享代码已升级到2.0,本页将介绍新版百度分享的安装配置方法,请点击左侧列表查看相关章节。
百度分享代码可以分为三个部分:HTML、_bd_share_config(具体配置)和js加载。代码如下:
导语: Most things that you can do manually in the browser can be done using Puppeteer! 初识puppeteer pup
最近准备给博客小程序添加一个留言板功能,考虑到如果只是纯文本留言有点过于简陋了,所以准备按照仿微信风格,在评论时可以添加emoji表情发送,实际上为了简化开发,原本找到了github一个插件WxEmojiView,可以快速引入项目实现emoji表情的渲染,但是由于几个缺点放弃了使用这个插件,首先这个插件实际上是用户选择emoji表情时转换成一串对应的字符串拼接到文本中,这样输入文本的显示效果我觉得不是很理想,第二点是插件坐着没有继续维护,所以担心某一天出问题不好处理,所以最终决定自己实现文本插入emoji表情的效果。我们可以先简单看下本篇文章最终要实现的效果:
我昨天用这个插件的时候也有这个问题,弹出内容大了就居不了中。这是组件不完美的地方,他设置了top和left值,而且是固定的。这种弹出层都是绝对定位的 所以没办法用margin:auto 0神马的居中。解决方案主要两种: 1.修改在浏览器里面调试模式。
这个功能对于浮层来说是很必要的,如下所示,是微信的 Windows 客户端。点击头像时会弹出一个浮层展示信息,当点击其他位置时,浮层会消失 并且点击的位置可以响应点击事件 。
本文由 IMWeb 团队成员 erasermeng 首发于腾讯内部KM论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 什么是滚动穿透 如图所示,有一层遮罩蒙层覆盖在body上时,当我们滚动遮罩层,它下面的内容也会跟着一起滚动,看起来好像是上面的滚动事件穿透到下面的DOM元素上一样,我们称之为滚动穿透。 阻止冒泡? 刚开始遇到这个问题的同学可能会联想到是不是由于事件冒泡到body上引起的,于是监听 scroll/touchmove事件,阻止事件冒泡。 事实上,这并没有什么卵用。 首先,一般而言滚动
之前一篇写了《逻辑性最强的React Native环境搭建与调试》说了RN的安装,今天在这里做一个复盘,让我们能够更直观更深入的了解React Native(以下简称RN),这一篇重点来说的就是,安装之后必报的2个错误的解决方案。 更新日期:2017.9.2 运行环境:Windows 10/Android环境 一、回顾一下RN的安装过程: 1.搭建Android开发环境,因为要运行在Android环境下,所有安卓的开发环境是要搭建的。具体的步骤请搜索度娘!(配置JDK、安装SDK Manager组件等);
本博客的主题已由 Fluid 改为 Butterfly, 部分功能可能失效,请注意!
前面有专门的文字,讲过Vue指令,以及如何使用指令,今天就来讲讲如何添加全局指令,并且附上2个非常适用的例子。
同上文,眼馋各大博主博客令人眼前一亮的设计,想要给自己博客也打扮打扮,今天就来弄弄鼠标点击出现爱心的效果吧!
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。
TolyUI 是 张风捷特烈 打造的 Fluter 全平台应用开发 UI 框架。具备 全平台、组件化、源码开放、响应式 四大特点。可以帮助开发者迅速构建具有响应式全平台应用软件:
在我们的工作过程中,每当需要排查问题、跑冒烟用例、看测试环境的效果时,经常需要在浏览器环境中切换登录账号,另外,在开发的过程中,也需要在编辑器 VS Code 里切换代理登录的账号。
1 负边距实现两边贴边的自适应布局 这个看起来是一个很普通的四列布局,但要求是自适应宽度大小,而且两边的图片还要和边缘对齐,图片和图片之间还有有相同的间隙,这样光把空间平分成4份是不够的,还要在外层的两边扩展出一些空间来,这里就用的负边距了以下是代码片段: 当然,负边距的使用场景还有很多... 2 文字截取 这个文字后面跟了图标,要求文字多的时候显示省略号而文字后面的图标要一直显示,代码如下: 3 padding-top取代占位图片 之前对于这种自适应宽度的图片列表,如果在没有加载完的时候,
最近在实现一个小功能,点击按钮的时候,会从右侧滑动弹出一个信息层,与此同时,信息层会和遮罩层一起出现,于是小程序的动画功能和小程序点击按钮出现和隐藏遮罩层分开写成了demo了。
附图:提示框浮层内容格式器 formatter: '{b0}: {c0}{b1}: {c1}' 格式化
随着移动端市场的份额越大,需求就越多样化。我们今天讨论的是移动端的滚动穿透问题。上面这段调侃的话可以看出需求中弹窗浮层还是挺常见的,那这个和滚动穿透有什么联系呢?
首先,placement 参数可以指定 12 个方向,top、topleft、topright、bottom 等:
Tech 导读 以低代码为基线,通过Ui2Code与ChatGPT辅助提升搭建效率,本文会详细介绍低代码搭建在京东内小程序场景的应用,低代码平台如何定位边界、如何做减法。
一、zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zoomfiy.css 或 min 前后顺序都可 js里加入 调用插件的函数 $('这里写要放大的图片').zoomify(); 如果有ajax 新生成的图片,要在ajax里再次调用一遍该函数。 二、zoomooz.js 推荐这里下载 使用说明: 这个插件有很多种 放大功能,可进行优雅的缩放操作,特别适用相册网站。这个图片方法不是 单独图片跳脱出来的
随着业务的扩展和延伸,需要的功能也是多种多样,而同一种效果可以有多种实现方案;和尚今天学习一下通过 Overlay 实现基本的悬浮引导效果;
应用情景 经典使用情景:js的一些事件,比如:onresize、scroll、mousemove、mousehover等; 还比如:手抖、手误、服务器没有响应之前的重复点击; 这些都是没有意义的,重复的无效的操作,设置对整个系统的影响还可能是致命的,所以我们要对重复点击的事件进行相应的处理! 节流函数 所谓的节流函数顾名思义,就是某个时刻限制函数的重复调用。 同样节流函数也是为了解决函数重复提交的问题,而防止重复提交的方法,不止节流函数一种实现。 方法汇总 本文整理了我在工作实践当中,觉的防止js重复提交,
antd 的样式使用了 Less 作为开发语言,并定义了一系列全局/组件的样式变量,可以根据需求进行相应调整 。
GuideView是一种基于DialogFragment实现的引导遮罩浮层视图的轻量级解决方案,它具备以下的特性:
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 23 天,点击查看活动详情
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 27 天,点击查看活动详情
姚瑞琼,前端程序媛一枚。2014年毕业后加入携程火车票事业部,今年年初起至今,主要负责React Native方案在火车票业务线的实践,先后参与并负责汽车票RN独立版、携程App抢票RN版的开发迭代。 *视频时长约23分钟,请在wifi环境下观看* 火车票作为携程体系下的重要环节,要兼顾良好的App用户体验及迅速的业务迭代,一个月左右一次App版本的节奏很难满足,而React Native跨平台、媲美原生App的用户体验以及无需发版的升级模式等等优势无疑使人眼前一亮。 加上基础团队的Ctrip Reac
先问个问题,大家旅游出行都遇到过哪些糟心事?大部人或多或少都有经历忘带身份证、飞机晚点、行李遗失、汽车抛锚、天气突变、乃至突发身体不适等等遭遇;然而,还有更糟糕的是到了目的地发现,遇到了“黄牛票”,一路颠沛流离,让人奔溃。
在浮层活体中,我们主打的特点就是“实时”——实时检测人脸距离、人脸遮挡等。在WebSocket诞生前,浏览器需要通过HTTP请求的方式去跟服务端索要数据。尽管后续的HTTP版本支持了或者聪明的开发者实现了各种“准实时”的索要数据的方案:轮询、长轮询、长连接等。但这些方式都离不开Request/Response对,即需要浏览器发起请求,服务器才有资格发送响应。
鉴于很多朋友在阅读小册,对研究源码时 AndroidStudio 如何调出相关面板有所疑惑,这里就专门写篇文章来介绍一下 AndroidStudio 阅读源码的小技巧。阅读源码的小技巧不单单是看底层源码,应用层的源码也依然适用,比如你接手了一个项目,也需要去阅读源码。
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,这里介绍一些实践经验。
原文:https://blog.csdn.net/zhaiyujia15195383763/article/details/87773771
在开发过程中,有时候,我们遇到的需求:需要图片放大缩小。 下面凯哥就介绍两种实习方式 一:弹窗层显示放大后的图片 二:鼠标悬浮放大后的图片 以下正文 说明:jquery.min.js和图片请自行修改 一:弹窗层显示放大后的图片,点击图片后缩小 效果图: 📷 代码: <head> <style type="text/css"> .fillbg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity:
一、事件触发顺序 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown、mouseup、mousemove和click事件。一次点击行为,可被拆解成:mousedown -> mouseup -> click 三步。 手机上没有鼠标,所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend,注意手机上并没有tap事件。手指触发触摸事件的过程为:touchstart -> touchmove -> touchend。 手机
LowCodeEngine是由阿里巴巴钉钉团队开源的低代码引擎, 该引擎全面遵循《阿里巴巴中后端前端基础构建协议规范》和《阿里巴巴中后端前端素材协议规范》。兼容主流浏览器:Chrome >= 80,Edge >= 80,safari 和 firefox 最近 2 个 版本。
在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的。其实实现起来也很简单,下面一起来学习一下吧。文末附上完整代码,可以复制关键部分直接使用到自己的页面上
为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。 该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)
Context 菜单算是对弹出框的一个特性支持,特别对于桌面端来说,让 右键弹出工具框 的处理更加简便。比如下方所示,是 AndroidStudio 中右键时弹出的工具:
本文中介绍的如何在pyecharts中配置全局组件,在后续的作图中会用到这些全局配置项。
早在2017年年初,我就用七八篇文章的篇幅系统介绍过Objective-C中的CoreAnimation框架。CoreAnimation是iOS中实现动画的框架,整个iOS中的动画(比如UIView中封装的动画、UIViewController切换时的转场动画、UITableViewCell移除增添时的动画等,都是对CoreAnimation的封装)都是通过CoreAnimation实现的。
《堂食点餐》云应用是一套在线点餐的行业应用模版,顾客可通过小程序/APP自助扫码订餐、加菜、买单,从而降低门店服务人员工作量及餐厅的运营成本。前端模版源码开源后,获得了很多开发者的好评,为了给开发者带去更好的学习和开发福利,《堂食点餐》后端数据云函数也开源啦!模板的数据云模型和云函数现已上线到数据云预置模型中了。通过导入模型,即可体验云端一体的《堂食点餐》完整案例。
LowCodeEngine是由阿里巴巴钉钉团队开源的低代码引擎, 该引擎全面遵循《阿里巴巴中后端前端基础构建协议规范》和《阿里巴巴中后端前端素材协议规范》。兼容主流浏览器:Chrome >= 80,Edge >= 80,safari 和 firefox 最近 2 个 版本。 特性 🌈 提炼自企业级低代码平台的面向扩展设计的内核引擎,奉行最小内核,最强生态的设计理念 📦 开箱即用的高质量生态元素,包括 物料体系、设置器、插件 等 ⚙️ 完善的工具链,支持 物料体系、设置器、插件 等生态元素的全链路研发周期 🔌
在快速开发的背景下,经历了n个版本后的考拉Android App中已经存在了各种各样看似相同却各有差别的弹框样式。其中包括系统弹框和自定义弹框,并且在线上时常会出现IllegalArgumentException的异常,而现有的解决方法是通过工具类来保护调用show和dismiss方法,这种方式效率不高,而且覆盖不全,开发过程中容易遗漏。另外现有的Builder方式的弹框构造工具虽然功能强大,能构造各种弹框,但是使用复杂,样式逻辑耦合,使用成本太高。于是,便需要一款样式统一、show和dismiss安全、调用简单、构造方便的统一弹框工具。
Echarts 折线图是图表中最常用的显示形式之一。使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的漂亮又直观就不容易了。本文将带领大家从最基本的折线图,一步步完善,最终做出可读性很高的可视化图表。
领取专属 10元无门槛券
手把手带您无忧上云