Web实战
关注
分享
扫一扫
mqy1023
https://github.com/mqy1023
展开
-
web实战(四)— — 侧栏工具条
参考慕课网《侧栏工具条开发》http://www.imooc.com/learn/425原创 2016-04-19 23:44:56 · 2328 阅读 · 0 评论 -
动态H5
一、CreateJs系列1、preloadJs 预加载资源文件(图片、音乐…)2、soundJs 音频控制3、easelJs 图形动画4、TweenJs 补间动画 二、jquery三、PageResponse.js 页面响应式框架四、textillate.js 文字动画效果 需强依赖 lettering.js、jquery、animate.css...原创 2017-04-21 15:05:39 · 1114 阅读 · 0 评论 -
【转】微信JS-SDK选择相册或拍照并上传PHP实现
原文链接： http://www.cnblogs.com/jiqing9006/p/5038340.html理解：微信上传接口是拍照，或者选择本地照片，上传到微信的服务器，获取到一个id，通过token与这个id获取到图片，保存到服务器即可。效果 通过微信js接口，调用底层程序。需要引入js文件，并进行配置。<script src="http://res.wx.qq.com/open/js/...转载 2017-04-25 15:55:44 · 1094 阅读 · 0 评论 -
input为file上传文件
1、去除input类型为file上传文件时默认样式和默认”选择文件”等；2、压缩要上传的图片3、隐藏上传按钮, 手动触发实现思路隐藏选择图片的input, 点击显示图片触发input的onchange事件// xxx.html<img id="pic" src="./images/xxx.png"><form id="uploadForm" ac...原创 2017-04-27 20:33:20 · 6835 阅读 · 0 评论 -
h5遇到的问题
zepto 手机上的jqueryiscroll 处理ios万恶的滚动条fastclick 解决手机上点击穿透的问题hammer.js 多点触发手势库flipsnap.js 手机屏幕水平滑动框架Animate.css css3动画库sencha touch、mui…vuephonegap / cordova一、ios手机上传竖拍照片旋转90度问题《利用exif.js...原创 2017-04-30 13:39:53 · 760 阅读 · 0 评论 -
纯css3美化checkbox、radio默认样式
一、效果展示二、实现步骤1、隐藏默认的样式 -webkit-appearance: none; appearance: none; outline: none;2、css3的对号样式 content: "\2713";3、选中的css放到after选择器 input[type=checkbox]:c...原创 2017-12-07 18:02:23 · 8654 阅读 · 0 评论 -
【转】总有一些你不知道web前端移动端知识
1.meta标签<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以...转载 2017-12-29 09:57:40 · 747 阅读 · 0 评论 -
layer的使用
一、layer弹出层父子之间交互1、子页面 -> 父页面var $pElId = parent.$("#pXyzId").val(); // 1、获取父页面元素var pVal = $pElId.val(); // 获取父页面元素的值$pElId.val("xxx"); // 更改父页面元素的值var pMethodFunc = parent.getPMethod(); ...原创 2018-05-05 17:19:04 · 715 阅读 · 0 评论 -
iframe标签实现form表单提交下载文件
一、表单提交的代码常规写法<iframe name="testIframeName" style="display:none;"></iframe> <form target="testIframeName" method="post" action="xxxx.do"> <input t原创 2018-04-22 23:41:59 · 3737 阅读 · 0 评论 -
underscore.js模板内循环输出
一、for遍历1、其中js端中定义 var arrs = [{name: 'haha', name: 'hi'];2、使用 _.template(xxx_tpl)({arrs: arrs});// xxx_tpl.html<% for (var i = 0; i < arrs.length; i++) { %> <li ><span class="xxx"></span><%=a原创 2017-04-18 09:38:04 · 1854 阅读 · 0 评论 -
标签data-*自定义属性值和根据data属性值查找对应标签
1、html中设置标签data-*的值<dl> <dt>标题</dt> <dd data-url="11">11111</dd> <dd data-url="22">22222</dd></dl>2、点击获取当前标签的data-url的值$('dd').on('click', function() { var urlVal = $(this).data('ur原创 2017-05-26 18:19:10 · 10540 阅读 · 0 评论 -
jQuery展开折叠侧栏导航菜单
< dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目，<dd>< /dd>用来创建列表中最下层项目，< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。效果图代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.原创 2017-05-25 09:27:09 · 4357 阅读 · 1 评论 -
js动态控制viewport窗口是否可缩放
【问题】单页面中某些A页面可放大，某些B页面不可缩放1、viewport中加id <meta name="viewport" id="view" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">2、进入B页面： document.get...原创 2017-02-27 16:24:54 · 9228 阅读 · 0 评论 -
web项目实战(一)— —开发中问题收集
html&css篇1、多个inline-block顶部对齐的问题 将一个block的div分成多个inline-block后出现不能顶部对齐的问题 【解决】给inline-block元素加上vertical-align:top2、table和tbody之间有间隔 【解决】设置table的css样式：border-collapse: collapse; React&Webpack篇1、web原创 2016-04-25 18:56:23 · 2244 阅读 · 0 评论 -
HTML+CSS实战(二)——固定层效果
(一)、position定位 position属性,又称position定位, 1、有3种形式的定位：静态定位、相对定位、绝对定位。 2、影响因素： 1.属性的取值，2.元素偏移量，3.元素偏移参照基准 3、position属性四种取值：static–静态定位， relative–相对定位，absolute–绝对定位，fixed–固定定位。 4、绝对定位特点【absolute与fixed同原创 2016-03-14 23:39:22 · 1038 阅读 · 0 评论 -
web实战(一)— — 焦点图轮播特效
(一)、原理分析1、参考淘宝网首页/极客学院首页的广告栏图片轮播2、适用技能点有：DOM操作、定时器、事件运用、JS动画、函数递归、无限滚动可以直接上http://www.imooc.com/learn/18听课并下载源码，不过里面有个小瑕疵，快速点击时next/pre箭头按钮时,图片不动，但是小图标一直在动，会使得两者不一致；判断是否动画在状态，应同时限定小图标的切换。下面源码和教程的区别是原创 2016-04-18 12:09:31 · 4594 阅读 · 0 评论 -
web实战(二)— — 商城分类导航
效果如下： html + css实现代码如下1、html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导航栏demo</title> <link href="css/navigatordemo.css" rel="stylesheet" type="text/css"></hea原创 2016-04-18 22:48:06 · 1215 阅读 · 0 评论 -
web实战(三)— — Tab选项卡切换效果
参考慕课网教程《Tab选项卡切换效果》：http://www.imooc.com/learn/176 基本功能有延迟切换、自动切换。本文用jquery实现1、html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab标签切换</title> <link href="css/tab原创 2016-04-19 22:45:41 · 14429 阅读 · 0 评论 -
【公众号开发】本地资源外网服务器化(一)
主要是因为各种云价格不便宜，选了最便宜的新浪云烂死了，上传zip包后各种资源文件缺失，导致代码跑不起来。。 还好网上找到了能够让本地资源服务器化的神器，步骤如下：一、让本地资源服务器化两种方式如下： * 1、MAMP或其他集成服务器环境启动 * 2、启动node app.js'use strict'var koa = require('koa');var s...原创 2017-03-18 10:58:14 · 888 阅读 · 0 评论