Web APIs
文章平均质量分 90
DOM与BOM的基本操作,大量案例展示。
「已注销」
书山有路勤为径 学海无涯苦作舟
展开
-
Web APIs(七)
移动端之轮播图功能自动播放轮播图手指拖动播放轮播图步骤1.利用定时器自动播放图片2.等过渡完成之后 再去判断 监听过渡完成的事件3.去掉ol下的li的current类 并为当前li添加current类4.手指滑动轮播图触摸元素touchstart:获取手指初始坐标。 手指触摸时 停止定时器移动手指touchmove:计算手指的滑动距离 并且移动盒子手指离开 根据距离去判断播放上一张与下一张如果移动距离小于50px 则回弹手指离开时 取消定时器html文件 <原创 2021-07-08 13:59:52 · 284 阅读 · 0 评论 -
Web APIs(六)
缓慢动画的原理匀速动画=盒子当前的位置+固定的值缓慢动画=盒子当前的位置+变化的值思路核心算法:(目标值-当前的位置)/n 作为每次移动的步长停止的条件:让盒子当前的位置等于目标的位置,就停止定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>缓慢动画的原理</title> <style&g原创 2021-07-03 22:53:08 · 113 阅读 · 1 评论 -
Web APIs(五)
offsetoffset:偏移量 使用offset系列的相关属性可以动态得到该元素的位置(偏移),大小等等1.获得元素距离定位父元素的位置2.获得元素自身的大小(宽度及高度)注意:返回的数值不带单位<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width, user-scalable=原创 2021-06-30 16:15:24 · 101 阅读 · 1 评论 -
Web APIs(四)
键盘事件onkeyup:键盘按键按下被松开时触发onkeydown:键盘按键被按下时触发onkeypress:键盘按键被按下时触发(不识别ctrl shift功能键)三个键盘事件的执行顺序:onkeydown----onkeypress—onkeyup<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C原创 2021-06-10 11:41:32 · 122 阅读 · 0 评论 -
Web APIs(三)
节点节点操作删除节点node.remobeChild(child)node.removeChild()方法是从DOM中删除一个子节点,返回被删除的节点点击按钮 删除ul中的li<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-06-03 23:56:46 · 120 阅读 · 0 评论 -
Web APIs(二)
排它思想如果有同一组数据,我们想要为某一个元素单独设置样式,需要使用for循环的排它思想思路如下清除所有元素的样式单独为当前元素设置样式顺序不能颠倒this是指当前事件的调用者。排它思想之习题一点击当前按钮,背景色变为紫色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib原创 2021-06-03 11:02:57 · 96 阅读 · 0 评论 -
Web APIs(一)
JS的组成Web APIs与javascript基础的区别Web APIs是javascript基础的应用,大量使用javascript基础做页面交互效果API与Web APIs的区别API是提供给程序员的一种工具,会使用即可Web API是浏览器提供的一套操作浏览器功能与页面元素的API(DOM与BOM)Web API一般都有输入与输出(函数的传参与返回值)针对浏览器做交互效果DOMDOM:文档对象模型,提供访问与操作网页内容的接口与方法,通过DOM,可以改变网页结构的外观与样原创 2021-05-31 17:24:19 · 474 阅读 · 0 评论