大二软设问题集合
文章平均质量分 58
本分类主要是整理第一次做项目时遇到的问题
律己以严
这个作者很懒,什么都没留下…
展开
-
jQuery尺寸、位置操作——元素的大小、偏移,被卷去的部分
24.jQuery尺寸、位置操作1.jQuery尺寸2.jQuery位置1.jQuery尺寸语法用法width()/heigt()设置或获取元素的width/height值innnerWidth()/innerHeight()设置或获取元素的width/height+padding值outerWidth()/outerHeight()设置或获取元素的width/height+padding+border值outerWidth(true)/outerHeight原创 2021-03-08 22:41:49 · 183 阅读 · 0 评论 -
JavaScript实现拖拽模态框
23.模态框的拖拽——软设问题总结1. 效果图2. 具体事件描述3.代码1. 效果图例子主要用来说明 模态框拖拽的知识点运用 所以css部分不怎么好看2. 具体事件描述原理:鼠标按下并且移动,松开鼠标事件:鼠标按下mousedown 鼠标移动mousemove 鼠标松开mouseup过程:鼠标移动过程中,获得最新的值赋值给模态框的left和top值模态框的位置:鼠标的坐标减去鼠标在盒子内的坐标3.代码 * { padding: 0;原创 2021-03-08 22:17:06 · 163 阅读 · 0 评论 -
JavaScript三大系列——offset、client、scroll介绍
22.三大系列——软设问题总结1.元素偏移量offset系列1.1 offset概述1.2 offset 与 style 区别2.元素可视区client系列3.元素scroll系列3.1元素scroll系列属性3.2 页面被卷去的头部3.4 页面被卷去的头部兼容性解决方案三大系列总结主要用法:1.元素偏移量offset系列1.1 offset概述offset就是偏移量的意思,使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获取元素距离带有定位的父元素的位置获得元素自身的大原创 2021-03-08 21:50:01 · 272 阅读 · 0 评论 -
js鼠标滚轮事件
21.js鼠标滚轮事件——软设问题总结1.滚轮事件简述2.主要js代码1.滚轮事件简述当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件。2.主要js代码因标准未定义滚轮事件具体会引发什么样的行为,引发的行为实际上是各浏览器自行定义的。 window.addEventListener("wheel", function(e) { let evt = e || window.event; //考虑兼容性 evt.preventD原创 2021-03-06 12:34:51 · 8621 阅读 · 0 评论 -
css实现视差滚动
20.css实现视差滚动——软设问题总结20.1 视差滚动20.2 视差滚动主要要点20.3 代码20.1 视差滚动视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。20.2 视差滚动主要要点把背景的宽高铺满一个浏览器可视区:width = 100%; height = 浏览器可视高度将背景设置为相对于视口固定:background-attachment: fixed;20.3 代码 <div cl原创 2021-02-23 00:16:56 · 380 阅读 · 2 评论 -
js定时器的用法,解决多次点击/触发定时器越走越快的问题
19.js定时器,以及解释、解决多次点击/触发定时器越走越快——软设问题总结19.1 js定时器19.2 定时器的使用19.3 定时器越走越快的原因19.4 解决定时器“越走越快”的问题19.1 js定时器在菜鸟教程中介绍到:js 定时器有以下两个方法:setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。setTimeout() :在指定的毫秒数后调用函数或计算表达式。两个方法都有三个原创 2021-02-22 23:14:49 · 6156 阅读 · 1 评论 -
触底事件——判断页面是否到达底部
18.触底事件——软设问题总结触底事件——简单地说就是页面滚动到底部的事件,一般用来做无限下拉效果,或者用来提示用户下面已经没有内容了思路:页面被卷去高度 + 浏览器可视窗口的高度 >= 整个页面的高度 则触发触底事件//js document.addEventListener('scroll', function() { //页面卷去高度 + 浏览器可视窗口的高度 >= 整个页面的高度 if (window.pageYOffset + window.innerH原创 2021-02-22 21:52:12 · 2804 阅读 · 0 评论 -
获取浏览器可视区的宽高
17.获取浏览器可视区域的宽高——软设问题总结//高度window.innerHeight//宽度window.innerWidth原创 2021-02-21 23:37:34 · 319 阅读 · 1 评论 -
CSS margin外边距塌陷、合并问题
16.解决外边距塌陷——软设问题总结16.1 外边距塌陷1.父子关系的块元素2.兄弟关系的块元素16.2 解决外边距塌陷的方法1.解决父子关系的塌陷2.解决兄弟关系的塌陷16.1 外边距塌陷1.父子关系的块元素如果一方有margin-top,则父子盒子一起有同样值上外边距;如果两方都有margin-top,则父子盒子取较大值的上边距;效果图如下:2.兄弟关系的块元素如果相邻兄弟有单独的margin-top / margin-bottom 是不会塌陷的相邻兄弟的上面一个块元素使用了ma原创 2021-02-15 14:49:23 · 1387 阅读 · 2 评论 -
15.mouseover和mouseenter的区别,父元素设置mouseover,子元素经过会触发
15.mouseover和mouseenter的区别——软设问题总结15.1 两个事件从中文解释看出本质的差别15.2 具体区别描述15.1 两个事件从中文解释看出本质的差别mouseover:鼠标经过事件mouseenter:鼠标进入事件15.2 具体区别描述在使用该事件无子元素下,这两者是毫无差别的;但在多数情况下,使用该事件的元素都是有子元素的,这就两者产生了区别。mouseover:进入绑定该事件的元素和其子元素均会触发该事件,所以有一个重复触发,冒泡过程。其对应的离开事件 mouse原创 2021-02-05 20:43:08 · 468 阅读 · 2 评论 -
防止鼠标左键拖动选中页面的元素
13.防止鼠标左键拖动选中页面的文字——软设问题总结很多页面在鼠标按住左键拖动的时候都会选择鼠标拖过的元素,像这样:有的时候会给用户挺不好的体验的,然而想要禁止这个功能其实也是很简单的,只需要在body标签设置如下任一方法:css的方法 body{ -webkit-user-select:none; user-select:none; }js的方法 <body onselectstart="return false;" > </body原创 2021-02-05 17:54:51 · 1294 阅读 · 3 评论 -
给图片加一个黑色半透明的遮盖层
12.给图片加一个黑色半透明的遮盖层——软设问题总结12.1 知识点12.1.1 img标签::after和::before失效12.1.2 默认地,::after和::before是行内元素12.2 代码案例12.3 不使用img标签的另一种方法12.3.1 思路如下:12.3.2 代码如下12.1 知识点在做这个效果的时候,想必第一想法都是先在img标签放图片然后再在img::before/::after元素设置遮盖层,但是会发现这个方法无法出现遮盖层。主要原因是:12.1.1 img标签::a原创 2021-02-05 17:31:56 · 7310 阅读 · 5 评论 -
CSS使元素居中的几种用法
11.CSS使元素居中的几种用法——软设问题总结11.1 使行内元素在其父元素内居中11.2 使块级元素在其父元素内居中11.1 使行内元素在其父元素内居中水平居中 :其父元素设置 text-align:center;垂直居中 :使其父元素的 line-height: 数值px; 中的数值 与其父元素height: 数值px;中的数值相等水平垂直居中:以上两个一起使用11.2 使块级元素在其父元素内居中水平居中 :该元素设置margin:0 auto;子绝父相后,给该元素设置原创 2021-01-31 18:54:33 · 124 阅读 · 3 评论 -
使用JavaScript和jQuery分别实现返回页面顶部功能
10.实现返回页面顶部功能——软设问题总结10.1 效果10.2 代码10.2.1 页面滚动到某位置返回顶部图标出现/消失10.2.2 点击图标返回顶部10.2.3 html和css10.1 效果10.2 代码10.2.1 页面滚动到某位置返回顶部图标出现/消失 //js document.addEventListener('scroll', function() { if(window.pageOffset >= 500) { //若页面滚动大于500px 图标显示 否则原创 2021-01-31 15:13:36 · 181 阅读 · 2 评论 -
各个定位在文档流中的占位情况
9.各个定位在文档流中的占位情况——软设总结系列9.1定位的分类9.2 各个定位的特点9.3 各个定位是否脱离标准流9.1定位的分类静态定位: static相对定位: relation绝对定位: absolute固定定位: fixed9.2 各个定位的特点静态定位:默认定位方式,按照标准流位置,没有边偏移。相对定位:元素移动时是相对于它原来的位置来说的;原来在标准流的位置继续占有,后面盒子任然以标准流的方式对待它。绝对定位:相对于最近的relation/absolute的父盒子移动;原创 2021-01-30 20:40:11 · 474 阅读 · 0 评论 -
点击框外区域,本弹框消失——事件委派
7.点击页面内模态/弹框以外的地方,模态/弹框消失——软设总结系列要解决这个问题首先要了解DOM文档流原创 2021-01-27 23:53:29 · 716 阅读 · 2 评论 -
JavaScript之DOM事件流——核心:事件冒泡
8.DOM事件流——软设总结系列8.1 事件流的定义8.2 事件冒泡8.3 事件捕获8.4 统一标准8.5 例子html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。那么是先执行父元素的单击事件,还是先执行div的单击事件 ???8.1 事件流的定义事件流描述的是从页面中接收事件的顺序事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流8.2 事件冒泡原创 2021-01-27 23:16:09 · 141 阅读 · 0 评论 -
点击非a标签跳转页面
点击非超链接跳转页面的方法这里插入一下a标签跳转页面的方式吧<a href="index.html"></a>接下来介绍下非超链接跳转页面吧window.open('url') //打开新的页面window.location = 'url' //跳转页面后有后退功能window.location.replace //跳转后没有后退功能下来举个栗子吧:以div为例直接在html上操作<div onclick="window.open('index.h原创 2020-11-04 15:18:44 · 939 阅读 · 0 评论 -
原生js/jQuery实现一键复制本页面链接到剪切板
jQuery实现复制本页面链接到剪切板最近做项目,刚好学到这个知识点首先,这个分为两个步骤:获取本页面的url复制到剪切板话不多说:获取本页面的url一般是使用这个语句window.location.href...原创 2020-11-03 22:32:17 · 2451 阅读 · 2 评论 -
限制input file上传类型只能是图片(附带accept可指定的值,即文件限制类型)
6.限制input file上传类型只能是图片——软设问题总结系列6.1限制文件上传类型的属性——`accept`6.2 accept的其他取值6.1限制文件上传类型的属性——accept主要代码是设置input的行内属性 accept 及其值代码如下:<input type="file" accept="image/*">点击选择文件后的效果图如下:6.2 accept的其他取值*.3gppaudio/3gpp, video/3gpp3GPP A原创 2021-01-22 21:54:22 · 4326 阅读 · 0 评论 -
CSS修改input标签中placeholder值的文字样式
5.设置input中placeholder属性的文字样式——软设问题总结系列5.1 placeholder的定义和用法5.2 placeholder选择器5.3支持修改的属性5.4 案例5.1 placeholder的定义和用法placeholder是HTML5 input的新属性,它一般表示input输入框的默认提示值;placeholder属性提供可描述输入字段预期值的提示信息(hint);该提示会在输入字段为空时显示,并会在字段获得焦点时消失;placeholder 属性适用于以下的 &原创 2021-01-22 21:20:21 · 4084 阅读 · 0 评论 -
单/复选框的默认样式的改变+写单/复选框时应注意的问题
3.改变单选/复选框的默认样式——软设问题总结系列3.1 使用单选/复选框时应注意的问题3.2 简单的大小改变3.3 更改默认样式3.1 使用单选/复选框时应注意的问题单选:name属性的值应该一致,才能保证选择一个复选:name属性的值不能一致3.2 简单的大小改变此方法在Google能正常显示,但是在火狐有时候就会失效给input添加一个样式:zoom:数值;数值>1时,单选/复选的图标(圆圈/正方形)会放大,数值越大,图标越大数值<1时,图标会缩小数值=1时,图原创 2021-01-20 21:11:59 · 607 阅读 · 0 评论 -
单选/复选框中点击文字能选择该选项
4.单选/复选框中点击文字选择该选项——软设问题总结系列为了提高用户体验,在单选/复选框中,点击文字选择相应选项这一操作是必不可少的。因为单选/复选框的操作都差不多,所以本文以单选框作为例子说明:主要的标签是<input>和<label>重点在于<label>标签的for属性的值应该与<input>标签的id属性的值相等代码如下: <input type="radio" name="sex" value="girl" id="s原创 2021-01-20 20:51:43 · 759 阅读 · 0 评论 -
如果刷新页面就清空表单里的值:刷新页面事件+清空表单内容
2.刷新页面清空表单内容——软设问题总结系列2在做项目的时候发现,刷新页面后,在火狐浏览器中表单的值不会自动清除,这时就需要我们在程序中设置这个事件:2.1刷新页面事件刷新页面的事件有好几个,这里我使用的是页面重新载入事件load,要是用的是其他事件也是也可的。2.2清空表单内容因为js写法跟jQuery写法有一点点不一样,所以我把两种写法都列举出来 <input type="text">js的写法var input = document.querySelector('原创 2021-01-18 22:24:58 · 1139 阅读 · 0 评论