- 博客(28)
- 收藏
- 关注
RSS订阅原创 实现瀑布流加载图片
什么是瀑布流布局呢？是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是Pinterest。页面容器内的多个高度不固定的div之间按照一定的间隔参差不齐的无序浮动，鼠标滚动时不断在容器内的尾部加载数据，且自动加载到空缺位置，不断循环。现在我们常用的电商网站、网图网站多数会都采用了这种技术。具体效果如下图所示：本文中总结三种瀑布流的写法，如下：一、利用js实现瀑布流布局注意：1.瀑布流布局的特点是等宽不等高。2.为了让最后一行的差距最小，从第二行开始，需要将图
2020-06-21 18:02:36
684
1
原创 H5播放器的实现
一、说到视频播放器就要谈谈Flash和H5有哪些不同Flash是Adobe 那个公司出的一个浏览器插件，可以做游戏，h5是最近“新的互联网新一代HTML5标准，h5游戏目前来说数量比较少，会火热，简单来说h5比flash新，也可以替代之HTML5的优点主要在于，开发周期短，开发成本低，且可以跨平台使用。与Flash技术相比，H5技术不但不需要插件、而且还是开发免费，以及对搜索引擎友好等特点更适...
2020-03-27 16:58:05
687
原创 复盘基于Bootstrap 实现响应式页面
一、什么是BootstrapBootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。以下主要为 Bootstrap3 ...
2020-03-16 22:10:34
361
原创 响应式布局详解
一、响应式布局是什么？响应式布局等于流动网格布局，响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。在我看来，响应式布局更像是自适应布局的优化（自适应布局+流体布局），通过rem和媒体查询设置多个流体布局，可以实现更加合适的视觉效果，相比弹性布...
2020-03-10 19:32:50
1609
原创 数据类型、内置对象总结
https://www.cnblogs.com/yan-yubo/p/Javascript-built_in_objects.htmlhttps://www.php.cn/js-tutorial-388896.html在js中万物皆对象；字符串，数组，数值，函数…在js里，一切皆为或者皆可以被用作对象。可通过new一个对象或者直接以字面量形式创建变量（如var i=“aaa”)，所有变量都有...
2020-01-01 19:40:49
338
原创 SVG 绘图小结
对于前端的绘图技术我在前面的文章做过了一点解析。 （Canvas绘图小结.传送门：）三大可用绘图技术：canvas 位图，单位是px 会师失真 2D图像和3D图形svg 矢量图 图片会尽量优化使得相对清晰webGL 3D图像和图形本文只要对SVG绘图技术做个小结...
2019-12-26 20:36:03
332
原创 Canvas绘图小结
一、目前web绘图技术一览①统计图表 echats②实时走势图 canvas③在线画图板 魔猴④HTML5游戏 three.js⑤可用绘图技术：canvas 位图，单位是px 2D图像和图形svg 矢量图webGL 3D图像和图形二、canvas 常规图形绘制本文我们先就Canvas绘图做一个小结。1.定义 canvas...
2019-12-26 20:15:41
278
1
原创 题解JS时间线与异步加载，隐式转化
原题：<body> <p>1</p> <script>document.write(2)</script> <p>3</p> <script> window.onload = function(){ document.write(5); ...
2019-12-26 19:51:25
136
原创 抽奖小程序、点名器案列~
在上一篇中，我们熟悉了JS 如何实现轮播图。上文链接传送门: JS 实现轮播图~：实际上这类抽奖、和点名器从本质上我们可以将其做成如同轮播图一样的列子。让既定的选项滚动起来，只不过我们需要在页面中加入开始和结束按钮，并个抽奖、和点名器绑定上相应事件。如此！抽奖小程序、点名器就成了技术要点：● 实现自动无缝滚动● 做好单个图片伪类，实现跑马灯效果● 通过按钮控制滚动，实现开始与暂停●...
2019-12-26 17:28:38
1349
原创 JS 实现轮播图~
轮播图初识轮播图，图片旋转器，滑片，无论你怎么叫这玩意，它在网络上无处不在。轮播图在电商网站主页上广泛应用，大多数电商网站的主页上都有它的身影~ 前端玩家轮播图那必然是当家技能~首先面对需求，我们需要了解轮播图应实现的功能：基本功能● 自动无缝滚动● 左右按钮控制滚动● 点击圆点切换图片成品案列 鼠标未触及区域时（自动滚动中） 鼠标触及区域后 （停止滚动，显示按钮）整...
2019-12-26 00:02:56
291
原创 题解：逻辑运算符、运算符的优先级、声明变量和声明函数的提升优先级、原型继承、闭包、覆盖等知识点。
所遇面试题解析题目如下：解析：题目如下： function Foo() { getName = function () { console.log (1); }; console.log('this is'+this) return this; } Foo.getName = function () { console.log (2); };...
2019-12-09 20:10:11
252
转载 小解：offsetWidth与offsetLeft
1、offsetWidth: 为元素的width+元素的padding+边框的宽度如图：2、offsetLeft、offsetTop、offsetRight、offsetBottom以offsetLeft为例进行说明，在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。现分以下几种情况说明：（测试所用的浏览器版本为：Chrome ...
2019-12-06 11:12:10
379
原创 JS 时间线的理解
预编译预编译又称为预处理，是做些代码文本的替换工作。是整个编译过程的最先做的工作。javascript是解释性语言，主要特点为解释一行执行一行，遇到错误直接停止。但是在js执行之前，js引擎会提前做两件事情。1、语法分析：就是检查代码有什么语法错误，如果没有语法错误，则进行下一步2、预编译：就是在内存中开辟一些空间，存放一些变量和函数ps:这两件事做完之后，才是逐行解释执行代码。预编...
2019-12-02 20:16:41
382
原创 JS作用域与作用域链
一、什么是作用域？作用域：在 Javascript 中，作用域分为 全局作用域 和 函数作用域.作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。函数在定义的时候，就已经确定了函数体内部自由变量的作用域。除了全局作用域外，只有函数才能创建作用域。 全局作用域： 代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。(ps:一切声明的全局变量，全...
2019-12-02 15:00:54
208
原创 面试题：图形的循环打印
题目要求打印一个菱形：**解析：**打印棱形即是打印出正反两个三角形**方法：**打印三角形的方式是利用双重 for循环来实现① 内层控制列：由于棱形的上部三角形是等腰三角形，因此出了可见的元素外左侧的元素有空格来代替。② 外层循环控制行：行数即是外层循环的次数function prismatic(){ // 上部三角形 var num = 1; for(var i = 1; ...
2019-11-24 21:49:17
257
原创 数组和类数组整理
一、类数组是什么?类数组是一个普通对象，而真实的数组是Array类型。特征表现为：（1）拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）;（2）不具有数组所具有的方法；常见的类数组有:函数的参数 arugments, DOM 对象列表(比如通过 document.querySelectorAll 得到的列表), jQuery 对象 (比如 $(“di...
2019-11-24 21:36:58
621
原创 JS闭包理解
JS闭包小识一、什么是闭包？二、闭包直观表现三、从作用域链分析四、拓展应用一、什么是闭包？闭包就是能够读取其他函数内部变量的函数。是一种解决问题的办法、一种特殊结构 ，使得重复使用变量又不让变量被污染的机制。JS中只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。二、闭包直观表现1、函数内部可以访问函数...
2019-11-12 21:07:05
401
原创 阶乘计算思路整理方法归纳
首先要面临一个问题何谓阶乘？阶乘指从1乘以2乘以3乘以4一直乘到所要求的数。举例来说，若要求的数是6，则阶乘式是1×2×3×……×6，得到的积是720，720就是6的阶乘。 若要求的数是n，则阶乘式是x=1×2×3×……×n，x就是n的阶乘。有个特殊的地方：数学家定义，0！=1，所以0！=1！方法一：对于累加法的延伸使用~累加说白了就是每次计算加上 上一次计算的值，如此使用累乘的方法自然无可...
2019-11-11 09:48:13
6562
原创 数组去重方法整理
数组去重方法整理方法一方法二方法三数组去重看似一个简单的问题，随着我们的学习，对于新知识的掌握这个曾经困着我们的问题逐渐变得游刃有余。要去重，中心解决办法就是比较该数组中是否重复的元素，而后将重复的元素去掉。以下带来几个楼主折磨自己中研究出的一点方法~~方法一for循环法~~思路：将数组中的每一个数与数组中其他的数进行比较，看是否有相同的。如果没有相同的那么该数即直接放到新数组里。新的数组...
2019-11-10 20:48:46
212
原创 前端浅谈
谈到这里我们不得不问问自己：何谓前端?web前端开发包含面很广可以说是做界面、跟直面用户相关的。总之~要学的东西也很多。具象化：就是做软件开发、微信小程序 、网页设计、网站建设、APP开发、往3D建模结合后游戏开发前端工作者也能施展一二。就通常意义上来讲，前端工程师面向于： 用户浏览器数据接口那么前端工程师的价值体现在哪儿呢?与用户最近，最愿意揣测用户，是工程师中最了解用户的。现今客...
2019-11-04 21:52:01
300
原创 现常用框架介绍及工具网站整理
流行的UI框架.流行的前端UI框架：Bootstrap（美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。）国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架...
2019-11-04 21:51:37
520
原创 Photoshop切图教程
前端设计中大家都知道，淘宝详情页对于图片大小是有要求限制的，所以在使用PS导出图片时，会将图片使用切图工具切为多个图片。下面小编分享下如何使用切片工具将详情页切割。在前段设计中，对于网端的请求自然越少越好，对于服务器的压力也越小。但网页中图片众多，这时候便有了精灵图。一张图片上有很多编辑所需的图片，只需要对服务器请求一张图便可以完成很多块页面的编辑设计。许多图片汇成的精灵图使用时如何才能得到...
2019-10-27 18:05:11
644
原创 HTML 表单小识
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2019-10-27 18:04:16
211
原创 HTML小识2
（三）HTML基础语法：2.常见的标签2.11、列表标签作用：用来将文字或者图片制成表的形式（是一种形式） 这就叫做列表形式：有序列表无序列表自定义列表2.11.1有序列表按照顺序来的（这种循序一般是用在法律文献或者是必须强调用连续的数字的时候）举例： <ol type="I">（列表样式） <li>打开冰箱</li> <...
2019-10-21 01:59:13
154
原创 HTML初识
这里写（一）.何为HTML(二)HTML的构造（三）HTML基础语法：1.用于描述功能的符号 为标记 一般使用<>1.1标签记分两种：2.常见的标签2.1 标题标签2.2段落标签2.3文本标签2.4换行标签2.5居中标签2.6跑马灯标签2.7特殊符号标签2.8文本标记：2.9超链接标签:2.10图片标签:目录标题)（一）.何为HTML首先,从名字上...
2019-10-21 01:59:02
164
原创 用CSS实现图形绘制！
@TOC使用说明！！！用CSS实现图形绘制！实际上就是对边框的运用！通过边框的挤压、用透明色等方法来实现绘制目标要求的图形如下图：可以明显看到这个呈现的是border为10px的一个正方形box { width: 100px; height: 100px； border-left: border: 10px soli...
2019-10-13 23:34:34
203
原创 浮动小识
简单说浮动即：css样式中的定位属性。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动，一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。其周围的元素也会重新排列（1、浮动元素之后的元素将围绕它。 2、浮动元素之前的元素将不会受到影响。3、如果图像是右浮动，下面的文本流将环...
2019-10-13 23:34:00
234
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人