水果烫瓜皮的博客

原创 js原生实现简易轮播图效果，原理简单易懂

原生js实现简易的轮播图用最基础的方式实现想不到的效果，能完成一个轮播图，能让你的兴趣大增。对于初学者来说，学完JavaScript基础知识，就要运用综合知识，实现一些网页的基础效果。如果代码，或者解析哪里有问题的，欢迎大家纠正。原理将图片全部重叠在一起，并且给所有的图片设置隐藏，第一张图片设置显示。然后依靠点击事件，显示出相应的图片。这样一个简单的轮播图就完成了。首先写出静态页面&l...

原创 ES5迭代方法及归并方法every()、filter()、map()、forEach()、some()、reduce()、reduceRight()

ECMAScript5为数组定义了5个迭代的方法。且每个方法都是要接收两个参数：要在每一项运行的函数，以及运行函数的作用域。并且相对于方法，方法中的函数还需要接受三个参数:数组的项（item）该项在数组中的位置(index)数组对象本身(array)ES5的五种迭代方法：every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。filter(...

原创 WebStorm实现浏览器代码同步刷新——从此告别ctrl+s、F5

前言这次介绍的是使用WebStorm代码编辑器，并给chrome装上插件。完成代码同步浏览器，实现同步刷新的效果。从此彻底告别ctrl+s、F5，告别经常重复的这两个动作。选择WebStorm实现的效果是比较好的，在它的页面右边有多个多个浏览器logo可供选择。方便你可以在多个浏览器上查看效果（前提是这几个浏览器你都已经安装好）。步骤一首先我们要对WebStorm进行设置打开WebS...

原创 CSS3动画性能优化——让硬件加个速

最近翻阅了很多有关CSS3动画优化的技术博客，学到了很多东西，受益匪浅啊。现在时间也不早了，在我睡前还是要把这篇文章撸出来。我才能安心睡觉了。浏览器渲染主流程当我们的渲染引擎取得了我们的文档内容之后它的基本流程是这样实现的：解析html以构建树形的数据结构（dom tree） > 构建render树 > 布局render树 > 绘制render树若对render树不清楚的...

原创 CSS3的一些理解，附上自制CSS3思维导图

CSS3相比与CSS有很多的实用新特征增加。例如CSS3新增的基本选择器（子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器）。群组选择器的出现，大大的降低了选择器出现相同代码的代码量。边款与圆角的效果，让我们的页面看起来也变得那么圆滑了起来。多背景图，以及渐变的效果使我们的页面看起来，更加的有层次感。transform2D以及3D的转换，让我们图片真正能够动起来——CSS3 rot...

原创 CSS3矩阵理解———transform: matrix()改变元素运动的本质

在CSS3转换这个大板块里面，有很多的细小的分类。例如这类rotate（旋转）,translate（移动）,scale（缩小）,skew（扭曲），其实这类的函数都是为了供各位的开发者便捷使用的。那么在CSS3中也有这样一个比较神奇的参数matrix()，你想要真的能够用好它，还是需要一点线性代数的知识的哦。在网上我也看了很多的技术贴，以及各类的博客。其实吧，大部分都是转的前端大佬张鑫旭的那...

原创 自制HTML5基础思维导图

这次这个写得比较简单，如图所示

原创 JavaScript自写逻辑思维导图（非常详细）

原创 超详细CSS思维导图，自制

CSS思维导图这是自写的CSS思维导图，主要是还是留着自己有时候有些忘记的东西，就可以在上面查找一下。上面写的也是比较基础的CSS知识，相信以后也一定会用得上的。今天还是花了点时间的，啊现在有点累了~~果然我这个身体板是差点啊，休息了休息了。对了顺带一提，这个是用Xmind写的。如果有需要的小伙伴，可以在下面留言，我有空把原文件发给你们。还可以在这个基础上，继续做修改。...

原创 关于CSS深入理解float浮动，float且用且珍惜

今天很高兴为大家分享一下，关于深入理解float的那些二三事~首先关于float浮动的问题，大家还是要知道一点点它的历史，这对之后深入理解float很重要。其实当初写float出来的人，他的本意到底是什么？其实float的设计初衷就仅仅只是，完全的实现一种文字环绕的效果而已，具体如下图所示~大家都知道浮动是具有破坏性，会让父元素高度塔下崩塌，看着也是挺惨的。所以又要提到最开始说...

原创 自写HTML思维导图，适合前端初学者收藏查看

HTML思维导图下午花了一段时间，来把这个HTML思维导图完整的写了出来，当然里面还有很多是不完整的。里面掺杂了一些代码在里面，比较适合才开始学前端的小伙伴们收藏。若在之后写的忘记了哪个标签，或者某个标签的属性可以把这张图打开看一下。当然了最靠谱的还是百度娘了（滑稽）。希望大家看了之后，觉得可以给个赞。让我也有动力再去写css思维导图，写这玩意儿是挺花时间的，但是我觉得也挺值，再次加深印象，这...

原创 目前最全的XMind乱码的解决方法，亲测可用

前言今天本来下了XMind，用来准备把HTML的思维导图写好。在网上找了破解版，当然我推荐还是这个老哥的博客https://blog.csdn.net/qq_16093323/article/details/80967867里面下载破解版。装的也很方便也很舒服，嗯~对如丝般顺滑。好的，启动XMind我就傻眼了。好家伙乱码了，如图所示~经过我在网上实验的各种办法，找到几种合适的供大家...

原创 正式来到CSDN的第一天~

我来了~之前也偶尔来CSDN逛一逛，今天算是正式的来到这里了。以后会不定时的更新，自己对于起前端的一些认知。目前的话，前期主要是会更新一些初级的知识理解，以及我自己遇到的一些软件方面的问题。各种的我认为有用的解决问题的方法都会在上面进行一些更新。等会儿我会把自己手写的HTML思维导图传上来。愿大家一起共努力，头发两行泪~...