bom
文章平均质量分 75
每天的学习
每天都想要一点点进步的学渣。
展开
-
Bom——获取url参数
获取url参数知识点location对象含义:用于获取或设置窗体的URL,并解析URLURLprotocal://host[:port]/path/[?query]#fragmenthttp://www.itcast.cn/index.html?name=andy&age=18#link①protocol:通信协议,常用的有http、ftp、maito②host:主机(域名),www.baidu.com③port:端口号(可选),省略时使用方案的默认端口,如http默认端口为8原创 2021-07-28 21:09:34 · 488 阅读 · 0 评论 -
Bom——动画
动画知识点动画(一)、动画效果1.获得盒子当前位置2.添加移动距离3.利用定时器setInterval重复操作4.加一个结束定时器条件clearInterval 注意:要给此元素添加定位,才能使用element.style.top/left等(二)、动画函数简单封装 // 当我们使用点击按钮执行动画的思路时当我们不断点击按钮,这个元素速度会越来越快,因为开启太多计时器,解决方案就是让元素只有一个定时器执行 clearInetval(obj.timer); obj.time原创 2021-07-27 23:31:40 · 149 阅读 · 0 评论 -
Bom——拖拽框
拖拽框效果点击提示文本,会弹出登录框和遮罩层;鼠标按住左键移动时表单框也会跟随鼠标移动,鼠标松开则静止;点击关闭按钮遮罩层与登录框消失。知识点元素偏移量offset常用属性①element.offsetParent:返回作为该元素带有定位的父级元素,如果父级都没有定位则返回body②element.offsetTop:返回元素相对带有定位父元素上方的偏移③element.offsetLeft:返回元素相对带有定位父元素左方的偏移④element.offsetWidth:返回自身包括pad原创 2021-07-24 20:24:49 · 536 阅读 · 3 评论 -
Bom——获取鼠标在盒子内的位置
获取鼠标在盒子内的位置效果鼠标放在粉色背景盒子内时,上方有文本显示鼠标的坐标核心思路利用鼠标事件,获取鼠标的信息(包括鼠标所在位置)鼠标移动时动态获取位置代码html <p></p> <div></div>css div { height: 100px; width: 100px; margin: 100px;原创 2021-07-24 18:38:27 · 348 阅读 · 1 评论 -
Bom——放大镜
放大镜效果效果如图所示,当鼠标放在小图片上时旁边会显示放大版,鼠标移动时放大版的图片也会相应移动。核心思路设置一个小盒子,里面放一张图片,旁边设置一个大盒子,里面也插入图片,display: none; 隐藏。当鼠标放在小盒子大盒子显示,离开后隐藏。设置一个遮挡层盒子(即例图中的黄色盒子)跟随鼠标移动,当遮挡层到达边缘时被阻挡。知识点元素偏移量offset系列offset概述①获取元素距离带有定位父元素的位置②获取元素自身大小(宽高)③(注意):返回的数值都不带单位常用属性原创 2021-07-24 17:11:58 · 161 阅读 · 1 评论 -
Bom——定时器
定时器定时器概念setTimeout(调用函数/函数名,[延迟的毫秒数])setTimeout又称为回调函数callback,上一件事干完再回头调用的意思,只调用一次setInterval(回调函数,[间隔的毫秒数])。每隔设定的时间运行一次函数,会重复调用案例案例1:5秒关闭广告效果:图片、文字过5秒后消失。核心思想设置定时器,当过了5秒后,被选中的事件源设置display = 'none' 。由于该效果只使用一次,因此设置setTimeout。代码javascri原创 2021-07-22 17:52:54 · 365 阅读 · 2 评论