| 导语 手Q终端原生的图片预览器支持图片翻页和各种手势,这些用H5怎样实现?基于alloyFinger,本文将介绍在手Q动漫上的图片预览组件是如何做到媲美原生体验的手势效果,同时也介绍一下关于图片手势效果里隐含的一些细节。希望对要实现手势交互和动画的前端同学有所启发。 作者:朱晓华--腾讯web前端工程师 @IMWeb前端社区 一、实现效果 先来看实现效果。目前已经上线的图片预览组件的路径如下:手Q动态——动漫——社区——点击图片。 类比手Q的AIO里的图片预览器,支持的手势和功能分别如下: 手Q动漫
Transporter是一种用于在不同数据存储之间移动数据的开源工具。开发人员经常为诸如跨数据库移动数据,将数据从文件移动到数据库或反之亦然等任务编写一次性脚本,但使用像Transporter这样的工具有几个优点。
腾讯前端团队前几天在Github上发布了一个JS手势库 AlloyFinger 极其小巧,只有几K,但功能很全面,支持缩放、旋转、拖拽、单击、双击、滑动、长按 而且除了Dom对象外,还可以监听Canvas内元素的手势 在腾讯内部的应用已经非常广泛,例如 QQ群、QQ动漫、AlloyTeam 等团队和项目 官方示例 http://alloyteam.github.io/AlloyFinger/ 代码示例 实现对一个图片的移动和缩放 <!DOCTYPE html> <html> <head> <
代码地址:https://github.com/reactjs/react-codemod
Object.defineProperty ,顾名思义,为对象定义属性。在js中我们可以通过下面这几种方法定义属性
大家好,我是一个闲着没事热衷于重复造轮子的不知名前端,今天给大家带来的是一个代码在线编辑预览工具的实现介绍,目前这类工具使用很广泛,常见于各种文档网站及代码分享场景,相关工具也比较多,如codepen、jsrun、codesandbox、jsbin、plnkr、jsfiddle等,这些工具大体分两类,一类可以自由添加多个文件,比较像我们平常使用的编辑器,另一类固定只能单独编辑html、js、css,第二类比较常见,对于demo场景来说其实已经够用,当然,说的只是表象,底层实现方式可能还是各有千秋的。
我们从事 Web 开发工作中,异常监控系统已经是我们朝夕相处的好助手,但是这些异常处理工具通常都是建立在 Web 生态,或者是假定运行在浏览器环境下的,但是当我们需要给一套跨端系统搭建一套类似的异常监控系统,并且期望该系统兼容 Web 生态,现有的工具很可能就不满足我们的需求了,因此我们需要考虑一套完整的异常监控系统整个链路将会涉及到哪些工具链,以及如何修改这些工具链来适配我们的跨端系统。
背景 开发维护规模较大的前端项目,难免时不时需要进行一些代码重构工作。举一个简单的 ?: 有一个 npm 包 an-npm-package-containing-constants,用于维护项目埋点时
咱们从入口开始分析,先看看这个 transform 文件的几个参数是什么?这部分代码位于 src/Worker.js:
Zepto简单来说是一个轻量级的JS库。它的优势在于能减少下载和与运行时间,兼容大多数移动浏览器和主流桌面现代浏览器。而传统的js框架,为了兼容低级、高级浏览器,代码量较大、运行时间长。移动端浏览器功能差异较小,兼容问题不突出。传统js框架代码大,在移动端会造成终端流量加大、显示迟缓的情况。zepto还实现了jQuery的大部分功能,其功能也是十分强大的。
bootstrap是目前最流行的前端开发框架,提供了丰富的前端组件,对于经验丰富的高手来说,其中的每项功能可能并不是太复杂,但由于他功能丰富,已经是一套系统,所以整体开发和组织的过程就不简单了 如果你来负责开发bootstrap,你会如何进行整体架构和流程的把控?有时间可以思考下,可以锻炼自己全局思维 通过bootstrap的源码,大概看下bootstrap的工程化开发方式 需求 (1)开发 主要使用css和js开发,js本身就是编程语言,开发环境也很成熟 css麻烦一点,用纯css编写的话效率不高,所以使
当浏览器的网络线程收到html文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列。
由于浏览器的版本和兼容性问题,很多es6,es7的新的方法都不能使用,等到可以使用的时候,可能已经过去了很多年。Babel可以把es6,es7的新代码编译成兼容绝大多数的主流浏览器的代码。 本篇文章主要介绍在项目中如何安装配置和使用babel. 1.在项目下初始化 package.json $ npm init 2.在项目中安装babel $ npm install babel-cli --save-dev 3.安装babel插件 $ npm install babel-preset-xxxxxx --sa
当浏览器的网络线程收到 HTML 文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列。
如上 为什么需要 less、什么是 less(Leaner Style Sheets) 我们先来看一个示例来体验一下不用 less 之前的 css 代码
有一些版本的浏览器对于JS新的语法(例如 ES6+)的支持不好,这时就需要将新的语法转换成 ES5 标准的语法,让浏览器正常识别它们,保证程序的稳定运行。
技术上没太大难度,有难度的地方是怎么让整个动画比较流畅。一个主要问题是动画的滞后性:当下载进度到某个点的时候,你再用250ms的动画过渡过去,这个时候已经慢了,所以很多人可能因为这个原因或者嫌麻烦,直接就不做动画了,在进度事件触发的时候直接更新进度条相应的位置,不过我们可以尝试实现一下。
webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是很详细,对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates,基于vue-cli用的最多,不过对于很多人来说,vue-cli 的配置还是过于复杂,对于我们了解细节实现不是很好,所以想自己从零开始搭建一个模板工程,也顺便重新认识一下webpack和vue工程化。
注意:fa前缀最新版本中已弃用。新的默认设置是实心的fas样式和品牌的fab样式。
近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下: 此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用openlayers展示的地图。而其难点却在
webpack中只能处理部分es6语法,一些高级语法或者es7语法webpack是不能正常编译的,如下
最开始在陌小雨那就看到了这个功能,觉得挺好玩,但是也没想继续深入。昨天在无主题博客看到他分享了这个功能的代码之后,觉得可以试试。 用了之后,发现他改进之后的代码存在几个缺憾: ①、他加入了随机播放功能,但是多次点击启动,将出现多首歌曲叠加播放 BUG(嗨过头了); ②、这个功能一旦启用,就必须刷新页面来停止,否则得等到歌曲播放完成才会停止“颤抖”; ③、如果用了 CDN,那么 js 会托管到 CDN,新增或更改歌曲就变得非常麻烦,因为缓存刷新很蛋疼; ④、启动之后,高潮来得有点慢,15.5s 才会看到
在此之前或许你已经用过babel,也许听说过什么 babel-loader babel-core、babel-cli、babel-plugin-...、babel-preset-env 反正各种乱七八糟的做项目随便用一一下就可以了,对他只有个一知半解,甚至不知道他到底是干什么的,反正项目要用,照着用就行了,至少博主之前的状态是这样,如果只对他有个一知半解甚至都不了解,那么项目出bug了你都不知道怎么去调试,只能复制-->粘贴-->百度。 基于此,写下自己对Babel的理解。
流就是流动的数据,一切数据传输都是流,无论在平台内部还是平台之间。但有时候我们需要将一个整体数据拆分成若干小块(chunk),在流动的时候对每一小块进行处理,就需要使用流api了。
在现代的Web应用开发中,Excel文件的处理和展示是一项常见的需求。为了提供更好的用户体验和功能,经常需要在Web应用中添加一个JavaScript Excel查看器,小编今天将为大家展示如何借助葡萄城公司的纯前端表格控件——SpreadJS来创建一个Excel查看器。
代码存放逻辑: 新建一个文件夹,可以起名“罗盘时钟”,然后在里面新建如下文件夹: 再把我上面所发的代码取相应的名字,放里面即可。 背景图自己加哈!
babel 6与之前版本的区别: 之前版本只要安装一个babel就可以用了,所以之前的版本包含了一大堆的东西,这也导致了下载一堆不必要的东西。但在babel6中,将babel拆分成两个包: babel-cli和babel-core。如果你想要在CLI(终端或REPL)使用babel就下载babel-cli,如果想要在node中使用就下载babel-core。 babel 6已结尽可能的模块化了,如果还用babel 6之前的方法转换ES6,它会原样输出,并不会转化,因为需要安装插件。
进程是CPU分配资源的最小单位,分配独立内存,进程之间可通信,但是必须通过内核,使用IPC接口来做,代价比较大 线程是CPU调度的最小单位,同一个进程下面可以有多个线程。
平常,我们在浏览界面时,会发现鼠标的样式有所不同,鼠标的样式变化和cursor属性有关。cursor属性的几个关键字:default、pointer、wait、help、text、crosshair。
✅作者简介: 大家好五一快乐,我是痴心阿文,你们的学友哥,今天给大家分享一个CSS3动画制作的旋转风车! 📃个人主页:痴心阿文的博客_CSDN博客-TypeScript.js,笔记,CSS领域博主 🔥本文简介:css3的旋转风车,适合新人学习 💖如果觉得博主的文章还不错的话,请👍三连支持一下博主哦🤞 📷 话不多说,直接上代码 ,肝着!🍉 img{ width: 200px; height: 200px; } @keyframes ro
基于HTML5/CSS/JS响应式圣诞老人过悬崖小游戏,拉杆子跨越悬崖小游戏,拉杆子过关小游戏非常火爆,并且非常好玩受欢迎,游戏玩法:按住鼠标伸出一根棍子。
LoadingManager是一个下载过程中记录、下载完成情况类,当three.js中的一些文件被下载时通过设置LoadingManager可以及时获取当前文件列表中的下载进度 //正在加载的文件管理 function LoadingManager( onLoad, onProgress, onError ) { //设置域 var scope = this; //当前状态为未加载 var isLoading = false;
这次效果,咱们需要用JS实现。主要是监听鼠标事件,计算鼠标滑动距离,改变魔方的rotateX、rotateY
最近自家产品开发使用中收到反馈,安卓内嵌网页无法打开PDF,而IOS可以打开。其实安卓无法打开分以下几种情况:
手Q天气是在手Q 6.0版本以上新增的功能,页面会展现当天的气温情况,已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果,天气页面会根据8种不同的天气信息,展现相应的天气动画。如下雨下雪,飘云,日光闪烁等动画效果。
结果发现这一行 Ts 报错了,原因是 vue 的版本不一致,真实的场景下不会出现这个问题,因为真实情况下组件库用的是上级的依赖。
本地是 main.tsx 引入了 App.tsx,并且还有 react 和 react-dom/client 的依赖:
或者我们可以使用可视化安装、配置、安装插件、启动项目。 在命令窗口中使用vue ui,弹出页面
这次的功能不用我介绍,是的,就是要做那个win7下窗口超级预览的功能。为了方便,我就做个demo来演示,就不用图里的例子来做讲解了。
大家好,关于惊艳的 Hero Header(不知怎么翻译,暂且这么叫吧) 的动效大家见过不少,在页面打开后的瞬间,好的 Hero Header 动效会给用户留下好的印象,如何抓住用户的第一印象呢。从设计角度方面来说,好的 Hero Header 都有以下要素:
为了优化前端工程, 我们通常会将静态文件压缩,减少带宽占用; 将静态文件合并,减少http请求, webpack可以轻易实现静态文件的压缩合并以及打包的功能, 除此之外, webpack还支持众多的loader插件, 通过loader插件可实现众多类型(如vue, less, jpg, css)资源的打包 webpack的文档写的相当出色, 为了方便读者学习, 下面每一类配置的注释里, 都附上了参考的原文档地址, 如果以后配置更新了,也方便查看更新的文档 如果不想自己配置, 可以直接拷贝最后的配置文档到自己
最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下。 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transform-origin,transform, perspective。
很久之前在博客分享了几篇关于外链跳转的代码或教程。如果没看过的可以先了解下: 分享两种外链跳转方法,可避免权重流失。 分享一个 WordPress 外链跳转教程,兼容知更鸟暗箱下载和文章索引 分享知更鸟 Begin 主题外链跳转代码,兼容下载按钮和弹出层上的外链 最近,有了一些灵感以及在其他博客也吸收了一些相关经验,就把现用的外链代码小改了下,感觉还不错,现在分享下,喜欢的可以试试。 ---- Ps:不喜欢啰嗦的朋友请直接从第五步开始看。 一、安全加固 首先,加入了在鱼叔博客看到了的防止恶意请求的简单
大家好,这将是一篇很短的文章,我将展示如何为 JavaScript 中的任何内容生成二维码。
关于 es6 的内容想必大家都已不再陌生,因为 es10 都已经出来了,只要不是太老的浏览器版本基本都支持 es6 的大多数特性了。可以看这里:http://kangax.github.io/compat-table/es6/ 当然,要保证 es6 或者 es7 的语法进行源码编写后完全可用,我们可以用 babel 将其转成 es5。Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。 关于 babel 的使用方法和原理都可以单列一个系列了,在此我们只讲述 babel 如何结合 webpack 使用。
https://github.com/comehope/front-end-daily-challenges
由于业务关系,有幸参与腾讯课堂app下载页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知识积累及讨论交流。 区分浏览器 既然要实
领取专属 10元无门槛券
手把手带您无忧上云