Cassiel.Lee-CSDN博客

原创移动端无缝滑屏实现

1 布局布局的包裹器：占满视口的宽度滑屏元素(动态生成，根据图片的数量) 注意：1、querySelector获取的是静态列表，动态添加元素后要重新获取一遍 2、有时候绘制跟不上js引擎的绘制，解决方法：定时器 2 基本滑屏拿到元素和手指一开始(点击到布局包裹器上时)的位置；拿到元素的实时位置，计算手指实时的偏移量，将...

2018-08-23 14:57:56 1179

原创移动端开发之基础概念

最近开始接触移动端开发相关知识，在这里做一些总结： 1.基本概念屏幕尺寸：对角线的长度（厘米）屏幕分辨率：横纵向上物理像素的个数(物理像素) 屏幕密度：每英寸上物理像素的个数视口尺寸代表的横纵向上css像素的个数（css像素） 2.4个像素 3个视口 2个操作 1个比例 4个像素：物理像素分辨率,是屏幕呈像的最...

2018-08-23 14:45:01 167

原创 Css3之选择器总结

CSS3选择器规范地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/CSS3选择最新选择器规范: https://www.w3.org/TR/selectors CSS3选择器： 1.基本选择器 /*通配符选择器*/ * { margin: 0; padding: 0; border: none; } ...

2018-08-18 17:10:56 219

原创 react项目之直聘

#项目说明 1 此项目是一个前后台分离的招聘的SPA，包括前端应用和后台应用 2 包括用户注册/登录，大神/老板列表，实时聊天等模块 3 前端:使用了React全家桶、ES6、Webpack等技术，构建页面主要是用到了antd-mobile库 4 后端：使用了Node、express、mongoDB、socketIO等技术这个项目是为了就业而练习的，从网上找的资源，如...

2018-08-17 14:06:32 322

原创前端之三列布局

在前端开发中，三列布局是很基础的一种场景，这篇文章就总结一下实现三列布局的方法及优缺点，还有一些和三列布局相关的布局方式。三列布局的要求一般为： 1、左右两边宽度固定，中间宽度自适应。 2、中间列的内容可以完整显示。这种情况用定位和浮动都可以实现。 1、使用定位，使用定...

2018-08-08 20:21:21 6463

原创定位之包含块

在前端开发中，经常会碰到使用定位的情况，常见的一种情况是将定位的元素的父级也开启定位，通过参照父级元素来对元素进行定位，然而在实际开发中，情况远远不止一种，总的来说，定位元素参照的都是其包含块，但是情况不同，包含块也不一样。首先，解释一下包含块，一般来说，“根元素”的包含块(也称为初始包含块)由用户代理建立。在HTML中，根元素就是html元素，不过有些浏览器会使用body作为根元...

2018-08-07 20:45:28 264

原创 angular简单练习之记录添加、删除

利用angular实现简单的记录添加删除功能，删除记录有两种思路，一种是直接遍历记录数组，并对数组中的每一个对象进行判断，如果被选中则删除，但是这种方式需要注意的是，当有两个连续选中的记录是，后面的选中的记录会被漏掉，因为删除数组的时候，删除对象后面的每一个对象对应下标都会减1，而遍历的顺序是接着删除对象的下标继续往后遍历，因此会漏掉删除对象后面的一个对象，解决方法就是，再删除操作后...

2018-08-04 13:37:30 501

原创 angular小练习之我的笔记

angular小练习，实现简单的笔记保存、读取和删除，并同步剩余字数，其中涉及到了数据存储方面的知识；html5页面很简单，就是一个文本框，加上三个button分别是保存、读取和删除；html代码：<body ng-app="myApp" ng-controller="NoteCtrl"> <h2>我的学习笔记</h2> <text...

2018-08-04 12:33:46 263

原创 html5之动态网页练习

github地址：https://github.com/CassielLee/html5Website.git最近两天，利用html5、css、和JS做了一个简单的动态网页，网页一共分为5个页面，每一个页面都有不同的动画效果，此外还有开机动画及背景音乐。第一屏：主要是图片的3D无缝轮播效果第二屏：照片墙，右边每一个图标都可以反转，且背面有相应的文字；第三屏：机器人动画第四屏：图片...

2018-07-27 19:06:19 11686 4

原创 canvas之动态气泡效果

利用canvas和三角函数做了一个简单的起泡效果，每个气泡的圆形都是随机生成的，且气泡线上浮动的路径为三角函数曲线，步骤如下：1、设置一个循环定时器，随机生成每个圆形的圆心坐标、半径等数据，存储在数组arr中；2、设置一个循环定时器，取出arr中每个圆的数据；3、利用一个for循环，通过操作x,y等来实现动画效果，因为canvas中无法直接操作绘制的图形，所以通过不断地清空画布...

2018-07-24 19:38:10 7179 1

原创 Mac停靠栏效果

实现Mac停靠栏效果，思路：当鼠标移动到图标的一定半径范围内的时候，相应的图标会有放大效果；1、布局：一个wrap包裹5个Mac图标即可（128px*128px）；2、图标初始化width和height分别为64px和64px；3、放大效果实现：改变 img的width即可（不用显式改变height,因为img能够高宽自适应）；4、将onmousemove事件绑定给document...

2018-07-23 20:33:46 634

原创简单的自定义播放器

利用Less和HTML写了一个简单的自定义播放器，github地址为：https://github.com/CassielLee/clPlayer.git效果如下：

2018-07-23 16:48:34 585

原创 canvas之马赛克

用canvas的像素操作做了一个简单的马赛克效果。主要是利用的canvas中的一些有关像素的函数，思路很简单，就是将马赛克盒子中的所有像素都设置成相同的，设置的数据可以从马赛克盒子范围内随机选取一个单像素的数据。因为canvas中没有直接操作单像素的函数，所以要自己定义。<!DOCTYPE html><html> <head> ...

2018-07-20 15:11:51 477

原创 transition天坑

1、transition在元素首次渲染还没有结束的情况下是不会被触发的；2、在绝大部分变换样式切换时,如果变换函数的位置个数不相同也不会触发过渡

2018-07-19 22:05:15 364

原创初遇canvas之三

###canvas中的变换 translate(x, y) 我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。 translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，注意：在canvas中translate是累加的，而CSS中不会，会覆盖 tr...

2018-07-19 22:04:44 121

原创 canvas之时钟

刚学了canvas，用canvas做了一个时钟，很简单，但是每一秒获得新的时间都要重新绘制一次。代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &lt

2018-07-19 22:03:15 144

原创 canvas实践之简单的写字板效果

利用canvas实现一个简单的写字板，效果图图如下：代码片段，其中#test是给canvas设置的id：<script type="text/javascript"> window.onload=function(){ var canvas = document.querySelector("#test") ...

2018-07-19 19:30:48 722

原创初遇canvas之二

###canvas绘制路径图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。 ###步骤 1.首先，你需要创建路径起始点。 2.然后你使用画图命令去画出路径 3.之后你把路径封闭。 4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。 ###绘制三角形 beginPath() ...

2018-07-19 18:48:43 232

原创初遇canvas之一

HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) ---->绘制...

2018-07-19 17:06:40 161

原创 flex之捋一捋

1.flex基础点 ---什么是容器，什么是项目，什么是主轴，什么是侧轴？ ---项目永远排列在主轴的正方向上 ---flex分新旧两个版本 -webkit-box -webkit-flex / flex 2.注意点 ---我们都知道新版本的flex要比老版本的flex...

2018-07-19 11:03:13 255

原创一个简单的多棱柱旋转的3D动画

利用CSS3的新增属性，实现简单的3D多棱柱旋转效果，并且将多棱柱的生成写成函数，这样就可以随意生成多棱柱了。 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &l

2018-07-17 22:00:26 1322

原创 CSS3简陋时钟实现

利用CSS3新增的一些样式写了一个简陋的时钟，主要是transform、transition、transform-origin等属性的应用，还有transition的一些坑，之后在总结。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <ti...

2018-07-17 20:52:01 125