HTML5
莫非C
这个作者很懒,什么都没留下…
展开
-
Html5学习笔记 —— Canvas
创建画笔<body> <canvas id="mycanvas" width="300" height="600"></canvas></body><script> var canvas = document.getElementById('mycanvas') var ctx = canvas.getContext('2d')</script>fillRect() 绘制矩形,默认的填充颜色是黑色。c..原创 2020-11-24 00:23:40 · 141 阅读 · 0 评论 -
Html5学习笔记 ——— H5新增方法classList/dataSet
classListclassList方法可以获取到这个dom元素的类的对象,但是目前classList属性只有FireFox3.6+和Chrome支持。add(value) —— 添加一个类contains(value) —— 判断有没有某个类remove(value) —— 删除一个类toggle(value) —— 切换一个类replace() —— 替换一个类Css<style type="text/css"> #box { border: 1px re原创 2020-11-22 14:01:04 · 242 阅读 · 0 评论 -
案例 —— H5模拟电脑中的 “回收站的效果”与实现图片拖拽上传功能
1、模拟电脑中的 “回收站的效果”假设有六张图片,一个垃圾桶图片,拖动某一张图片放在垃圾桶上后,将图片直接从Dom节点中删除。删除需要从DOM子节点中删除元素,需要阻止dragover默认事件利用源对象(可以拖动的)和目标对象数据传递记录源对象的Id思路:1、获取元素,利用for循环为每个原对象添加事件,记录添加了哪个原对象2、在for循环中,为每个元素设置自定义属性,方便后期操作3、开始拖动某个图片时,利用 e.dataTransfer.setData()方法,将当前图片的id存储到d原创 2020-11-21 19:16:35 · 619 阅读 · 0 评论 -
案例 —— Html5实现列表拖放
需求:通过H5的拖放api,实现对列表的拖放替换效果。HTML<ul class="ul-list"> <li draggable="true" class="item">葫芦娃</li> <li draggable="true" class="item">直到世界的尽头</li> <li draggable="true" class="item">如果当时</li> <li draggable="tru原创 2020-11-21 17:33:28 · 463 阅读 · 1 评论 -
Html5学习笔记 ——— 拖放api与dataTransfer对象
前言拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。拖放API拖拽:Drag;释放:Drop;1、 开启/关闭拖放将将要拖放的对象元素的draggable属性设置为true,任何元素均可实现拖放,默认允许拖放。img与a元素必须指定href。draggable即是一个设置拖放的开关,为true,代表可以拖放,为false,代表不可拖放。<p draggable="true">这是p标签</p>2、拖动原创 2020-11-21 17:21:21 · 440 阅读 · 0 评论