移动端web布局方式 目前移动端开发主流方案有单独制作移动端页面(如:京东,淘宝,苏宁等等)即移动端pc端分开,单独为移动端制作一套页面,这也是目前移动端主流的开发方案,以及响应式布局(如三星官网)即移动端pc端共用一套页面,在不同的屏幕尺寸下样式会自动适应。这篇文章主要介绍移动端单独制作的布局方案。流式布局,也叫百分比布局。 flex弹性盒子布局 less+rem+媒体查询布局 混合布局一.百分比布局 通过将盒子宽度设置成百分比来适应屏幕大小的变化。...
用JQuery与FormData上传文件 主要介绍如何用JQuery与FormData如何上传一个或者多个文件。1.首先利用input的type属性中的file选择上传文件,如果要上传多个文件在input属性中添加multiple属性,这个属性类似于checkbox可以对文件进行多选。如下:<input type="file" id="file" multiple></input><button id="btnSend">上传文件</button>2.引入JQ文件后,给按钮设置
JS封装原生AJAX请求 封装原生ajax请求,主要就是对请求类型进行判断以及对传递的参数进行处理。简单列举了get请求以及post请求,实际引用中delete请求等同于get请求,put请求等同于post请求。// 封装ajax请求function myAjax(option) { // 创建一个XML对象 var xhr = new XMLHttpRequest() // 将传入的请求类型进行处理 转换成大写 var methods = option.type.toUpperCase
JQuery制作轮播图 用jquery制作一个简单的轮播图。页面效果如下对功能进行拆分。 小圆点显示以及小圆点高亮 左右箭头显示与隐藏 点击小圆点实现轮播图切换 点击左右箭头实现图片切换 轮播图可以自动轮播 鼠标移入停止图片轮播鼠标离开开启自动轮播 结构如下:...
JQuery 购物车案例 本文介绍用JQuery实现购物车案例相关功能界面如下主要功能为:1.单选全选按钮 当单选按钮全选中时全选按钮也被选中,选中商品高亮效果2.商品数量++ -- 功能,商品数量输入框功能 删除商品功能。3.单个商品小计,总商品数量计算,总价计算。4.清空购物车及删除选中商品。一.全选功能 //1 全选功能 $('.checkall').change(function () { var check = $(this).prop('checke
HTML5用canvas制作飞机大战小游戏 css样式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
HTML5 用canvas画吃豆人 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
JavaScript函数柯理化 简而言之,柯理化就是将接收多个参数的函数,变成一个接收部分参数的函数,再返回一个新函数,继续接收参数,直到参数全部接收,再计算结果。如:fn(a,b,c,d)→fn(a)(b)(c)(d)或者:fn(a,b,c,d)→fn(a,b)(c)(d)即可以让函数的参数不必一次全部传递,可以多次传递。 // 要实现的功能 参数想加function add(a, b, c, d) { return a + b + c + d;
JS中函数的防抖与节流 前言在JS中,一个事件在短时间内多次触发,不加以节制的话,会对服务器以及浏览器造成极大的负担,所谓的节流防抖简而言之就是限制一个事件在一定事件的触发次数。防抖防抖的原理:在一定时间事件无论触发多少次,只有最后一次的触发事件会执行。举个栗子: <!-- 创建一个input标签 --> <input type="text" id="ipt"> <script> // 获取到这个input var ipt =