- 博客(17)
- 收藏
- 关注
RSS订阅原创 swiper插件
swiper.min.js插件实现多种滑动效果，可在pc、手机、平板中使用。该插件官方网址：http://www.swiper.com.cn/（版本3）、http://2.swiper.com.cn/（版本2.X）里面可以下载该插件，而且有相应的实例。例外最近发现还有swiper相关的交流网址:http://bbs.swiper.com.cn/forum.php 。例：简单的轮播图效果...
2019-05-26 21:35:52
292
原创 常用的本地缓存机制
常用的几种本地缓存机制：Cookie,LocalStorge,SessionStorge1.Cookie的特点 1）cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或邮件那样的大数据。 2）只要有请求涉及cookie，cookie就要在服务器和浏览器之间来回传送（这解释为什么本地文件不能测试cookie）。而且cookie数据始终在同源的htt...
2019-05-24 21:18:51
283
原创 jquery与zepto的异同
Zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为它的API和jQuery相似，而文件更小。Zepto最大的优势是它的文件大小，只有8k多，是目前功能完备的库中最小的一个，尽管不大，Zepto所提供的工具足以满足开发程序的需要。大多数在jQuery中·常用的API和方法Zepto都有，Zepto中还有一些jQuery中没有的。另外，因为Zepto的API大部分都能和jQuery兼...
2019-05-22 20:57:35
91
原创 less的适配
之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的fon...
2019-05-21 21:55:58
710
转载 less的基本用法
Rem,媒体查询适配方案Less基础语法介绍作用: 维护CSS, 按照CSS的基本语法去写.变量☞@自定义变量名: 值; 例如: @nav_bgcolor: red; nav { color: @nav_bgcolor; }☞变量的运算: @width: 10; nav { width: @width...
2019-05-20 22:32:09
318
转载 回调函数callback
什么是回调函数？我们绕点远路来回答这个问题。编程分为两类：系统编程（system programming）和应用编程（application programming）。所谓系统编程，简单来说，就是编写库；而应用编程就是利用写好的各种库来编写具某种功用的程序，也就是应用。系统程序员会给自己写的库留下一些接口，即API（application programming interface，应用编...
2019-05-19 20:40:22
105
原创 响应式布局
第一步：在网页代码的头部，加入一行viewport元标签（1）viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度 （width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。<meta name="viewport" content="width=device-width, i...
2019-05-18 23:23:58
62
原创 媒体查询
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以...
2019-05-16 22:18:04
79
原创 移动端touch事件
Touch 事件首先 touch 包含三类事件，它们分别是：touchstart、touchmove、touchend 。望文生义这种本能相信你应该会有，但在这里我还是有必需对这三个词进行一翻不必要的解释。touchstart：手指触摸到一个 DOM 元素时触发。touchmove：手指在一个 DOM 元素上滑动时触发。touchend：手指从一个 DOM 元素上移开时触发。这...
2019-05-15 21:27:28
184
原创 移动web
什么是移动WEB开发，将网页更好的显示在移动端的一些设置，简单来说就两点如下：1、流式布局，即百分比自适应布局将body下的div容器的样式设置如下：div{ width:100%; }2、viewport视口在head标签中，添加如下：<meta name="viewport" content="width=device-width,initial-scale=1....
2019-05-14 21:52:27
85
原创 使用canvas绘制等分圆
代码如下 :<body><canvas width="600" height="500" id="cvs"></canvas></body> var canvas = document.querySelector('#cvs'); canvas.style.border = '1px solid blue'; ...
2019-05-13 21:55:24
1578
2
原创 H5 canvas的使用
Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。//绘制矩形 var canvas4 = document.getElementById('test_canvas4');//获取绘图区域 var ctx4 = canvas4.getContext('2d');//让我们拿到一个CanvasRenderingContex...
2019-05-12 21:56:44
327
原创 canvas绘制三角形
<body><canvas id="cvs" width="600" height="600" style="border: 1px solid #00a4ff;"></canvas></body><script> var cvs = document.querySelector('#cvs').getContext('2...
2019-05-09 21:23:34
1844
原创 stellar制作视差滚动效果
html单个元素选项中data-stellar-background-ratio比较常用。 接受一个正整数的值，可以改变它被应用到元素的影响速度。 例如，data-stellar-background-ratio="0.5"意味着改变速度为自然滚动速度的一半。 如果想使这个属性值低于1，建议在样式表里设置background-attachment: fixed;。<divclass=...
2019-05-07 19:26:17
454
原创 伸缩布局
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。...
2019-05-06 21:10:51
157
转载 css和js实现流星雨
<template> <div > ============================流星雨============================ <div class="title"> <div id="stars"></div> </div> </div>...
2019-05-05 21:56:39
345
原创 H5动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> img{ width: 150px; animation: plane 7s ease-in-out infinit...
2019-05-04 20:50:56
1157
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人