千寒33-CSDN博客

原创 Javascript 懒加载与预加载（8）

1.懒加载懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。1.1 使用场景当网站的图片很多或图片比较大时，基于网站性能和用户体验考虑，这时需要用到懒加载。 1.2 原理初始时，img中的src不赋值（或者赋以一个占位图片），而是将真正的图片地址存在用户自定义属性dat...

2022-05-28 22:51:44 592

原创 Javascript优化（7）(事件流、事件冒泡、[阻止]事件捕获、事件委托）

1.事件流事件流指的是从页面中接收事件的顺序。分为冒泡流和捕获流。 DOM二级事件规定事件流包括三个阶段： 1）事件捕获阶段 2）处于目标阶段 3）事件冒泡阶段 DOM在触发事件后，会经历事件捕获和事件冒泡两个最重要阶段。2.事件冒泡由最里层向最外层触发事件的过程，叫事件冒泡。(同时绑定一个事件，由内到外执行）<body> <div id="parent"> <button id="c...

2022-05-28 22:27:37 324

原创 Bootstrap的全局CSS样式

全局CSS样式（核心内容，掌握） 1）标题 h1-h6 small 2）页面主体 body（字号为14px，行间距1.5行） p（字号为14px，行间距1.5行，margin为10px） 3）内联文本元素及类（样式）元素： mark：标记 del：删除 ...

2022-05-28 12:10:39 411

原创栅格布局的使用

栅格布局 1）四种栅格布局 a.手机端 .col-xs-* （屏宽768px以下） b.平板电脑端 .col-sm-* （屏宽768px-992px之间）版心最大宽度750px c.中型PC端 .col-md-* （屏宽992px-1200px之间）版心最大宽度970px d.大型PC端 ...

2022-05-28 12:03:19 3271

原创 Bootstrap框架解析

Bootstrap框架解析 1）必须使用HTML5文档类型 <!DOCTYPE html> 2）移动设备优先 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />其中meta viewport 有6个...

2022-05-28 11:38:40 224

原创认识Bootstrap与引用

1.官网：Bootstrap中文网 (bootcss.com) 2.BS是一个入门级UI框架，汇集了HTML、CSS（less）（布局）和JavaScript（插件）的一个框架。 3.BS不是所有项目都适合使用BS实现布局，如果UI工程师没有按照BS的栅格系统理念去设计UI图，因为BS不适合做固定宽高的网页。BS一般用于开发没有UI图的项目，且为响应式的项目。 4.BS3和BS4的区别： BS3有4种栅格，而BS4有5种栅格； BS4全面引入ES6，...

2022-05-28 11:18:06 800

原创当前流行的UI框架

最流行的UI框架 1.Bootstrap：用于开发响应式布局、移动优先的Web项目。可以快速上手，几乎没什么学习成本，是一个入门级的UI框架。 2.AmazeUI：妹子UI，它也是一个移动优先的UI框架，主要能解决国内浏览器存在的跨屏适配和兼容性问题。 3.Uni-app：是一个使用Vue.js开发的所有前端应用的UI框架，开发一套代码，可发布到IOS、Android、H5和微信小程序、快应用等多个平台。 4.ElementUI：是由饿了么前端开发团队开源的UI框架，主要用于...

2022-05-28 11:10:53 6736

原创 JSON、ajax请求、DOM操作

1.JSON JSON(JavaScript Object Natation：JS对象表示法）是一种轻量级的数据交换格式。用独立的编程语言的文本格式来存储和表示数据。 1）优点易于阅读和编写，同时也易于浏览器解析和生成，并有效地提升网络传输效率。 2）与XML比较 JSON书写或解析时是一个对象，更容易解析；而XML是由用户自定义标签来存储数据的，对于前端来说，不容易书写且解析起来比较困难。 3）JSON文件内容它可以是一个...

2022-04-06 22:44:07 577

原创 JS原生轮播图

通过计算每张图大小，进行偏移值增加减少数值实现图片的轮播效果HTML <div class="carousel"> <ul class="imgs"> <li><a href="#"><img src="images/01.jpg" alt=""></a></li> <li><a href="#"><img src="images/02.jpg" al

2022-03-30 09:55:57 154 1

原创循环滚动轮播图

HTML<div id="source"> <div id="insourse"> <div id="sourse1"> <a href="#"><img src="images/01.jpg" alt="img"></a> <a href="#"><img src="images/02.jpg" alt="img"></a>

2022-03-29 22:09:49 231

原创轮播图的两种简单方式（display，src）

方法一：HTML<body> <div class="banner"> <a href="#"> <img src="images/01.jpg" alt="banner"> </a> </div></body>CSS *{ padding: 0; margin: 0; } .banner{ width: 700px

2022-03-28 22:53:26 639

原创放大镜案例（html/css/js）

实例效果为淘宝、京东等购买物品查看图片细节效果HTML<body> <div class="zoom">  <div class="small-img"> <img src="images/small01.jpg" alt="small-img"> <div class="ball"></div> <div class="mask"

2022-03-27 15:16:45 168

原创 javascript（5）——基本包装类型、变量、作用域及内存

1.基本包装类型在基本数据类型中有3个特殊的类的存在：String、Number和Boolean。上面三个基本类型都有自己的包装对象，有相应的属性和方法。调用方法的过程是在后台发生的，所以我们称作为基本包装类型。通俗地讲就是基本类型的数据都有一个包装它们的类，这些类都有自己的属性和方法，这些基本类型的数据都可以直接去调用这些属性和方法。 1）Boolean类型没有自己的属性和方法。 2）Number类型 a.属性 ...

2022-03-23 23:09:04 104

原创 JavaScript（4）——内置对象、面向对象

1.内置对象 1）global对象在JS中没有global对象，Web浏览器将Global作为window对象的一部分加以实现。方法： a.encodeURIComponent():对unicode进行编码处理 b.decodeURIComponent():对unicode编码进行解码处理 c.eval(''):具有字符串解析器的作用（慎用！因为它的性能较差，且比较危险） 2）Mat...

2022-03-22 22:16:51 1387

原创面向对象常用方法——isPrototypeOf、hasOwnProperty、getOwnPropertyDescriptor、defineProperty、propertylsEnumerable

1、isPrototypeOf()作用：用于指示对象是否存在于另一个对象的原型链中，存在返回true，否则返回false语法：prototypeObject.isPrototypeOf(object)用例： function Person(name,age){ this.name=name; this.age=age; } var lisi=new Person("张三 ",20); console.log(Person.prototype.isProto

2022-03-21 15:20:34 411

原创面向对象常用属性及运算符——prototype、constructor、in、delete、instanceof

prototype：用于获取和设置对象的原型属性语法：object.prototype.name=value实例： function emlpoyee(name,job,born){ this.name=name; this.job=job; this.born=born; } var bill=new emlpoyee("Bill Gataes","Engineer",1985); emlpoyee.prototype.salary=null; bi

2022-03-21 11:11:04 240

原创利用原型属性自定义内置函数——删除元素

//删除指定下标的元素 Array.prototype.removeAt=function(){ if(isNaN(index)||index>this.length){//若不是一个数字或者大于数组长度 return;//index输入不合理，直接结束对象 } this.splice(index,1) } //根据内容删除元素 Array.prototype.remove=function(obj){ if(typeof obj!="..

2022-03-20 14:20:51 74

原创点击选中目标移动另一个区间

html<body> <div class="select"> <select id="sel1" multiple size="10"> <option value="香蕉">香蕉</option> <option value="苹果">苹果</option> <option value="鸭梨">鸭梨</option> <op

2022-03-19 19:59:27 102

原创 javascript（3）——函数

1.函数函数就是将具有一定功能的一段JS代码的封装，可以在程序的多个地方被反复调用。 1）定义函数格式一： function 函数名（[形参列表]）{ 函数体； [return [<表达式>];] } 格式二： var 变量名 = function（[形参列表]）{ 函数体；...

2022-03-12 22:33:21 90

原创 javascript基础（2）

1.常量常量也叫直接量或字面量，在程序中直接给出具体的数据。常量是不可以改变的。如：100，true，'abc',null,undefined等2.变量变量就是在内存中开辟一段空间用于存放某个数据。变量必须要有变量名，变量名必须遵循标识符的命名规范。定义： 1）只定义变量 var x; var a, b, c; 2）定义变量且赋值 v...

2022-03-11 20:21:12 80

原创 Javascript基础(1)

1.JS是运行在客户端的一种解释型编程语言，它是一种弱类型的语言。2.JS的作用：用来完成前后端交互、增加用户体验的一些逻辑实现。3.一个网页是三部分组成：结构（HTML/HTML5）、表现（CSS/CSS3）和形为（JavaScript）。4.前端开发的核心是：JavaScript。5.JavaScript的组成： 1）ECMAScript（标准：ECMA-262）：基础语言部分（基础、面向对象等） 2）DOM（标准：W3C）：节点操作 3）BOM（无标准）：浏览...

2022-03-10 22:07:21 555

原创网页中的位图与矢量图使用

1.位图和矢量图位图是由像素点组成的，文件较大，放大会失真，一般用来表示人物、风景等；矢量图是由线条组成的，文件较小，放大后不会失真，一般用来表示工程图等，是由若干个几何图形拼合而成。2.分辨率又叫解析度、解像度。可分为显示分辨率、图像分辨率、打印分辨率和扫描分辨率等。图像分辨率就是单位英寸中所包含的像素点数。分辨率越高意味着图像越清晰，但这个图像文件也越大。3.位分辨率又叫色彩深度或位深度，批一个像素中，每个颜色分量（Red,Green,Blue，Alpha通道...

2022-03-09 10:05:20 568

原创点击折叠菜单（HTML/CSS/JS）

HTML <ul class="menu"> <li> <h3>HTML</h3> <p>超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p> </li> <li>

2022-03-09 10:01:23 2753 1

原创点击回到顶部（html/css/js)

HTML <img src="img/001.jpg" alt=""> <img src="img/002.jpg" alt=""> <img src="img/003.jpg" alt=""> <img src="img/004.jpg" alt=""> <img src="img/005.jpg" alt=""> <img src="img/006.jpg" alt="">

2022-03-09 09:34:22 190

原创预加载案例

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。预加载优点：方便网站上冲浪，保证了图片快速、无缝地发布，增加用户体验。用CSS实现HTML<div class="box"> <div id="preload1"></div> <div id="preload2"></div> <div id="preload3"></div> ...

2022-03-08 22:15:40 106

原创懒加载案例

懒加载：懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。懒加载优点：页面加载速度快、可以减轻服务器压力、节约了流量，用户体验好HTML<body> <img src="" class="imgs" data-src="img/...

2022-03-08 21:55:15 181

原创 javascript基础事件以及Even对象（6）

1.事件事件指的是文档或浏览器窗口中发生的一些特定的交互瞬间，也可以理解为：作用在对象上的操作（动作）。事件是可以被JS监听到的行为。一般在开发中，是通过触发DOM来完成事件操作。2.EventTarget接收事件接口 EventTarget是一个由可以接收事件的对象来实现接口，并且为它们创建监听器。三个接口： 1）addEventListener()：绑定事件监听函数，实现监听 2）removeEventListener()：移除事件监听 3）disp...

2022-03-08 15:50:05 673

原创鼠标拖动模块移动（html、css、js）

HTML<div id="box">模块</div>CSS*{ margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background-color: red; position: absolute; t

2022-03-08 15:43:25 295

原创滚动鼠标轮，增加/减少模块高度（html、css、js）

HTML部分<div class="mouse">事件对象</div>CSS部分<style> .mouse{ width: 100px; background-color: red; height: 25px; }</style>JS部分 var oMouse=document.getElementsByClassName('m

2022-03-08 14:33:16 204

原创酷我音乐播放（html、css）

HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="music.css"></head><body><div class="nav"> <div class

2022-03-07 22:24:54 1421

原创 1.9 CSS 布局

1.多列（分栏） 1）column-count 规定元素应该被分隔的列数（栏数）。 column-count: number|auto; 2）column-gap 设置栏间距。 column-gap: length|normal; 3）column-rule 设置栏间分隔线。 a)column-rule-style：设置线型。 none 没有分隔线 hidden 隐藏线 ...

2022-03-06 22:44:53 94

原创 1.8 CSS3 动画

1.变形(transform） translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。位移效果 translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。缩放效果 scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 scaleY(n) 定义 2D 缩放转换，改变元素的高度。...

2022-03-06 22:37:21 63

原创 1.7 CSS3新特性

1.CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。2.CSS3的主要新特性： 1）选择器 2）阴影 3）形状转换（2D <-> 3D） 4）变形 5）动画（过渡动画、帧动画） 6）边框 7）多重背景 8）反射 9）文字 10）颜色函数（rgba/hsl/hsla） 11）滤镜（filter） 12）弹性布局 13）多列布局 14）栅格布局 15）盒模型...

2022-03-05 21:51:57 135

原创 1.6 HTML5新特性

1.HTML5由W3C和WHAT组织机构共同研发出来的，于2014年正式发布。2.HTML5成为了新一代网页开发标准。3.HTML5新特性（面试） 1）增加了audio和video音频播放，抛弃了Flash 2）新增了canvas画布（绘画，制作动画（如小游戏开发等）） 3）地理定位 4）增加了离线缓存 5）硬件加速 6）Web Socket（全双工通信） 7）增加了本地存储 8）新增了一些语义化标签4.网页布局标签 header...

2022-03-04 22:50:59 126

原创 1.5 CSS定位布局

1.定位（position)（重点）设定元素在文档中的位置。会将标签（元素）转换为块级。2.定位分类（属性值） 1）static:静态定位默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流（文档流） 2）relative:相对定位占用标准流（文档流），它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。它相对于自身所占的位置做偏移。 3）absolute:绝对定位脱离...

2022-03-04 22:17:14 60

原创 1.4 CSS浮动布局与盒模型

1.什么是浮动？浮动就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。2.浮动的原理就是让元素脱离文档流，不占用标准流。3.float的属性值： left:左浮动 right:右浮动 none:默认值，不浮动4.浮动后，后面的元素不管是块级还是行级元素，不会显示在下一行。5.清除浮动目的：让后面的元素自动掉到下一行。方法： 1）添加空标签，并设置样式：clear:both; ...

2022-03-04 21:39:23 94

原创 1.3 CSS基础

1.CSS:层叠样式表，用来美化网页的。做到结构（HTML）和表现（CSS）分离。2.基本语法：选择器 { 属性: 属性值; }3.CSS引用方式：行间样式、内部样式、外部样式、导入外部样式。行间样式：直接在标签上书写样式。 <p style="color:red">这是p标签</p> 内部样式：在文件的内部书写样式。 <style type="text/css"> ...

2022-03-04 21:29:27 47

原创 1.2 HTML标签属性

1.标签由标签名、标签属性和文本内容三部分组成（注意：单标签没有文本内容）。2.标签属性是对标签的一种描述方式。3.标签属性分通用属性、自有属性和自定义属性。4.通用属性:所有标签都具有的属性（除<br />标签外）。通用属性有：id：用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。class：用来给标签取一个类名。style：用来设置该标签的行内样式。title：当鼠标移到该标签...

2022-03-04 21:20:37 241

原创 1.1 HTML基本认识

1. HTML是一种超文本标记语言，它不属于编程语言。2. HTML5是2014后推出的，它是公认的下一代web语言，是重要的网络推手。3. HTML具有简易性、可扩展性、平台无关性和通用性等特点。4.网页分为静态和动态两种。5.五大主流浏览器: IE (Edge), FireFox, Chrome, Opera, safari6.浏览器内核由渲染引擎和JS引擎两部分组成。内核: Trident (IE), Gecko (FireFox) , Webkit (safari/chrom

2022-03-04 21:15:30 291

使用js实现放大镜效果案例

空空如也