- 博客(15)
- 收藏
- 关注
RSS订阅原创 H5实现一个简易本地视频播放器
注：本例子没有涉及到数据库，是纯前端实现的要点介绍video标签是html5新增的一个标签，用于视频播放，在W3C官方文档可以查到它的相关方法，属性和时间，此处我大致介绍一下我用到的一些：1，方法：play()，视频播放pause()，视频暂停load(), 视频加载2，属性currentTime,视频的播放进度duration，视频的总长度volume，视频的音量3...
2019-11-29 23:02:58
5888
2
原创 纯js代码实现轮播图
现在要自行因代码实现一个轮播图，主要具备下列功能定时轮播鼠标移入暂停轮播，移出继续正常轮播点击左侧按钮，查看上一张点击右侧按钮，查看下一张导航栏地小圆点根据不同轮播图，对应高亮现在看一下实现地具体效果（找图片太麻烦，我直接把每张轮播图设置不同颜色，方便辨认）按照以往惯例，依旧是来捋一下思路：首先看一下大思路：盒子设置溢出隐藏，设置7个 li 标签用于表示轮播图（首尾两张是假图...
2019-11-21 23:41:41
407
2
原创 js实现全选，全不选和反选功能
首先来展示一下上图中实现的功能是：点击顶部全选框选中，全部的框都会选中，反之就会全不选中；当表体中选框全部选中时，全选框选中当点击反选按钮时，表体中的选框状态置反，选中的变为没选中，没选中变为选中直接上代码，我就不贴表格样式部分代码了，只贴js实现部分<script>//1， 全选全不选var all=document.getElementById("all")...
2019-11-20 12:55:37
1904
原创 直观理解js预解析
预解析所谓预解析，就是在js代码解析之前，浏览器会把所有带var和function关键字声明地变量或函数进行提前地声明和定义js代码的执行是分成两个阶段的，首先预解析，然后再一行一行去解析代码预解析的过程 ：将var关键字声明的变量提升到所在作用域的最前面，赋值不会提升，默认值是undefined将function关键字声明的函数提升到当前作用域的最前面，且同时会定义函数表达式只用预...
2019-11-17 11:09:17
182
原创 如何利用CSS3实现立方体
CSS3中新增了过渡属性和3D效果，我们可以利用这个实现一个立方体，此处介绍两个属性：perspective，视距，即人眼到屏幕的距离，可以是元素的子元素获得近大远小地效果（潜台词：加给父元素不要加给自己，不然没效果）transform：preserve-3d（默认是flat，2D元素）；依旧是加给父元素，让子元素保留3D的位置。只有加了这个属性，元素才能真的算是3D元素这时候就有疑问，...
2019-11-13 19:18:28
230
原创 滑动门效果的实现
滑动门滑动门常常是用在导航栏中的一种效果，就例如聊天工具中的聊天框，会随着文字的增加而拉长，但是两侧的效果比如尖角并不会变形。下面介绍两种实现思路1，三盒子法思路，将滑动门分成三块，左边放一个背景，右边放一个背景，中间的块用背景水平平铺如下：<div class="box"> <div class="left"></div> <...
2019-11-12 12:46:17
672
原创 CSS中的定位
定位CSS三种布局机制之一，利用定位可以更方便的实现某些由浮动和标准流不容易实现的效果，比如让元素移动到指定位置静态定位position：static；元素默认的定位就是这个，不能设置偏移，所以是无法用来实现定位布局的相对定位position：relative；配合left：，top：，right：，bottom：属性使用，当然元素偏移是要有一个相对的位置的，就像我们以前学习物理时使...
2019-11-11 22:03:42
95
原创 浮动以及清除浮动的常见方法
关于浮动CSS的布局有三种机制 ，一是标准流，即普通流，所有的元素都属于标准流；二是定位流，三则是定位流浮动流组最开始是用来实现图文混排的效果，因为浮动元素压不住文字。我们如果只使用标准流来布局，很多效果是无法实现或者说实现起来比较麻烦，比如我们想多个元素拍成一行，又希望这一行的元素之间没有间隙且可以设置宽高，如果只用标准流来实现无疑是比较麻烦的，但是浮动就可以很容易的实现<div c...
2019-11-11 19:48:43
158
原创 CSS中的外边距合并问题（外边距塌陷）
marginmargin指外边距，是盒子模型的组成之一（盒子=内容+边框+外边距+内边距），类似于表格中的cellspacing，具体用法如下：一个值时，指定上右下左的外边距两个值时，第一个值为上下外边距，第二个值为左右外边距三个值时，第一个值为上外边距，第二个值为左右外边距，第三个值为下外边距四个值时，分别对应上、右、下、左四个外边距也可以单独设置，如margin-left，mar...
2019-11-11 10:00:04
577
原创 CSS的三大特性
CSS三大特性1，层叠性当相同选择器为某个元素设置了相同属性时，如先给一个盒子设置了红色的背景色，后面又给它设置了绿色的背景色，此时后来设置的会覆盖掉先前设置的背景色，这就是css的层叠性。<div></div> <style> div{ width: 100px; height: 100px; background-color...
2019-11-10 21:42:44
311
原创 CSS的display的显示属性
display属性关于display属性，在w3c官方文档中给出的解释是用来定义建立布局时元素生成的显示框类型。我们可以简单理解为定义一个元素应该如何显示1，none<div class="hide"></div> <style> .hide{ width: 100px; height: 100px; background...
2019-11-10 16:28:07
532
原创 CSS的line-height
关于line-height,即行高，大部分学习过css的同学都知道可以利用其来实现单行文本居中，即让盒子高等于行高，便可以实现这个效果，下面来看一下实现原理行高的组成行高=上距离+内容高度+下距离关于基线，我们不要理解成我们平时写的汉字的底部，而是英文子母中如s，h等字母的底部，那一条线称为基线，而类似g，y这种字母底部的那条线称为底线，而两行文字基线于基线之间的距离，就称为行高让行高等于...
2019-11-10 14:41:59
164
1
原创 CSS的三种引入方式
1,行内式直接写在html标签中，控制当前标签，对其他标签不起作用<div style="width:100px;height:100px;">我是盒子</div><!-- style就是标签的一个属性，css样式写在里面，各样式之间用分号隔开 -->2，内嵌式一般写在head标签中，但理论上写在什么位置都可以，可以控制整个页面的样式<!DO...
2019-11-09 09:33:32
327
原创 原型，原型对象，原型链
原型，原型对象，原型链原型和原型对象只要创建一个函数，浏览器就会自动为其分配一个原型，可以通过prototype属性访问到原型，原型也可以通过constructor属性访问到其对应的函数，此外，通过函数创建的实例对象默认可以通过_proto_属性访问到原型对象（注：_proto_属性不是标准属性，最好不要用在生产环境中）。Person(name,age){ this.name=name...
2019-10-27 10:29:22
182
原创 JavaScript中变量地址指向的问题
@JavaScript中变量地址指向的问题JavaScript中变量地址指向的问题js中，基础变量是存储在栈中，而复杂变量如对象，函数和数组，栈中存储的是复杂变量的地址，数据存储在堆中###基础变量如N1=300,N2=200,N3=100,存储格式为###复杂变量，引用类型```javascriptvar obj={name:"西西里",age:10}如上，存储格式应...
2019-10-27 09:17:43
2451
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人