![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 63
错言语
这个作者很懒,什么都没留下…
展开
-
PC端特效
PC端特效元素可视区 client用 client 的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。元素滚动 scrollscroll 的相关属性可以动态的得到该元素的大小、滚动距离等元素偏移量 offsetoffset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意: 返回的数值都不带单位o原创 2021-11-10 22:33:36 · 136 阅读 · 0 评论 -
跟随鼠标的天使
天使图片跟随鼠标移动而移动鼠标不断的移动,使用鼠标移动事件: mousemove在页面中移动,给document注册事件图片要移动距离,而且不占位置,我们使用绝对定位即可核心原理: 每次鼠标移动,我们都会获得最新的鼠标坐标, 把这个x和y坐标做为图片的top和left 值就可以移动图片核心代码:var pic = document.querySelector('img');document.addEventListener('mousemove', function(e) {var x原创 2021-11-06 02:32:04 · 148 阅读 · 0 评论 -
BOM浏览器对象模型
BOM 浏览器对象模型BOM 概述BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。(由网景公司提出)DOM与BOM区别DOM:文档对象模型DOM 就是把「文档」当做一个「对象」来看待顶级对象是 document操作页面元素W3C 标准规范BOM:浏览器对象模型把「浏览器」当做一个「对象」来看待顶级对象是 window浏览器窗口交互的一些对象浏览器厂商在各自浏览器上定义的,兼容性原创 2021-11-06 07:00:00 · 202 阅读 · 0 评论 -
DOM(三)
事件高级注册事件(绑定事件)给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式传统注册方法:利用 on 开头的事件 onclick<button onclick=“alert('hi~')”></button>btn.onclick = function() {}特点: 注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c 标准 推荐方式-add原创 2021-11-03 06:15:00 · 199 阅读 · 0 评论 -
tab栏切换(十分好用)
tab栏切换布局效果当鼠标点击上面相应的选项卡(tab),下面内容跟随变化分析:Tab栏切换有2个大的模块上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。规律:下面的模块显示内容和上面的选项卡一一对应,相匹配。核心思路: 给上面的tab_list 里面的所有小li 添加自定义属性,属性值从0开始编号。当我们点击tab_list 里面的某个小li,让tab_con 里面对应序号的原创 2021-10-31 17:21:24 · 939 阅读 · 1 评论 -
排他思想(十分常用)
排他思想首先先排除其他人,然后才设置自己的样式 这种排除其他人的思想我们成为排他思想<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl原创 2021-10-31 21:30:00 · 239 阅读 · 0 评论 -
DOM(二)
自定义属性的操作1.获取属性值element.属性 获取属性值(元素本身自带的属性)console.log(div.id);element.getArrtibute('属性')get获得attribute属性的意思console.log(div.getAttribute('id')); console.log(div.getAttribute('index'));2.设置元素属性值element.属性='值'div.id = 'test';div.classN原创 2021-10-31 17:18:20 · 65 阅读 · 0 评论 -
案例----点击按钮更换图片
点击按钮更换图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti原创 2021-10-29 01:44:14 · 228 阅读 · 0 评论 -
案例---点击获得当前时间
点击按钮会获得当前时间<!DOCTYPE html><html lang="en"><head> <title>点击按钮会获得当前时间</title> <style> div, p { width: 250px; height: 25px; line-height: 25px; colo原创 2021-10-29 01:45:29 · 328 阅读 · 0 评论 -
点击按钮显示明文密码
点击按钮将密码切换成文本框,并可以查看密码明文核心思路: 点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框算法:利用一个flag变量,来判断flag的值,如果是1 就切换为文本框,flag 设置为0,如果是0 就切换为密码框,flag设置为1 <style> .box { position: relative; width: 40原创 2021-10-29 01:46:57 · 1175 阅读 · 0 评论 -
分时间显示问候图片
分时间显示问候图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t原创 2021-10-29 01:48:32 · 128 阅读 · 0 评论 -
循环精灵图
循环精灵图背景首先精灵图图片排列有规律的核心思路: 利用for循环 修改精灵图片的 背景位置 background-position让循环里面的 i 索引号 * 44 就是每个图片的y坐标效果图:实现代码:<style> * { margin: 0; padding: 0; } li { list-style-type: non原创 2021-10-29 09:00:00 · 213 阅读 · 0 评论 -
DOM(一)
DOM什么是DOM?文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM的作用获取页面元素给元素注册事件操作DOM元素的属性创建元素操作DOM元素DOM树文档:一个页面就是一个文档,DOM 中使用 document 表示元素:页面中的所有标签都是元素,DOM 中使用 eleme原创 2021-10-29 01:42:15 · 79 阅读 · 0 评论