首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

利用HTML5,无JS实现各种交互效果

本文利用的是HTML5 details, summary 首先 一、了解HTML5 details, summary默认交互行为 标签在Chrome,Firefox等浏览器下默认是有展开收起行为的...JS捕获键盘行为手动设置outline 这个方法不需要对HTML进行任何的改动,是通过CSS和JS配合对全局的元素进行outline优化。...imageMogr2/auto-orient/strip) 没有任何JS参与。...('details');``` 最后,无JS实现的好处有: 省了代码,加载快了; 实现更简单了,开发快了; JS还没加载交互也能进行,体验好了; 键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了...自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS到移动端HTML5到各种框架的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的

7.5K20

HTML5 拖放API与Vue.js实战

在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具,使用户可以从头到尾直观地管理项目。Trello、Pivotal Tracker 和 Jira 等工具都属于看板应用。...HTML5 拖放 API 是什么? 当用户将鼠标移到可拖动元素上时,拖动操作开始,然后将元素移动到启用拖放的元素上。 再默认情况下,唯一可拖动的 HTML 元素是图像和链接。...如果是链接,传输的数据是 URL。可以将链接移动到浏览器的 URL 栏中,这样使浏览器跳转到该 URL。 所以,如果没有数据传输的能力,那么拖动元素就毫无用处了。...总结 在本文中,我们介绍了什么是 HTML 5 拖放 API ,如何使用,以及如何在 Vue.js 中实现。 拖放功能也可以在其他前端框架和原生 JavaScript 中使用。

4.3K10

HTML5 JS实现毛玻璃效果(高斯模糊)

Contents 1 HTML5 JS实现毛玻璃效果(高斯模糊) 1.1 index.html文件 1.2 StackBlur.js文件 1.3 index.css文件 1.4 代码演示及源码下载 HTML5...JS实现毛玻璃效果(高斯模糊) 苹果IOS系统的毛玻璃效果非常绚丽,自己也想在HTML5中实现同样的效果 css3中可以使用blur来实现这种效果: .blur { -webkit-filter...其实我们要做的就是用代码实现图片的高斯模糊转换,canvas中的getImageData方法获取图片像素信息,然后写相应的算法对图片像素进行转换 对高斯模糊的转换算法感兴趣的可以参考这篇文章—-点击打开链接...如果对这个算法实现不感兴趣,也可以用前人已经实现的JS类库StackBlur.js,毕竟前人栽树后人乘凉嘛。...doctype> HTML5 JS实现毛玻璃效果(高斯模糊) <link rel="stylesheet" type

6.2K30

链接 动态链接 静态链接

要想了解底层,链接是一个不得不过的一关,我总结了下学习的心得,首先要了解链接器到底是如何工作的,链接器分为两类,一个是静态链接,一个是动态链接,先来讲解静态链接,静态链接要干两件事: 符号解析 目标文件定义和引用符号...链接器通过把每个符号定义与一个存储器位置联系起来,然后修改所有对这些符号的引用,使得它们指向这个存储器位置,从而重定位这些节。 静态链接的输入文件是一系列的目标文件,输出是可执行的目标文件。...,每一个节经过链接会变成段,段对应的是执行相关的,而且段对应的是可执行目标文件的ELF文件,现在就来看看经过静态链接生成的可执行目标文件的ELF文件格式,这里面都是以段作为术语的: 可执行目标文件的ELF...这就是一个静态链接器如何将一个可重定位文建变成可执行目标文件从而运行到平台上。 动态链接有是怎么回事呢?...,这个过程就叫做动态链接

2.8K30
领券