0

前端图片上传那些事儿

前言本文讲的图片上传,主要是针对上传头像的。大家都知道,上传头像一般都会分成以下 4 个步骤:选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片接下来,就详细的介绍每个步骤具体实现。一、选择图片选择图片有什么好讲的呢?不就一个 input[type=file] ,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的。下面就先来看看最简单的选择图片:这时候,点击这个 input , 在 iOS 手机的显示如下:其中的 “浏览” 选项,可以查看到非图片类型的文件,这并不是我...

阅读全文>>

0

一组开源免费的Web动画图标,荐给需要的设计师和程序员

介绍 titanic是在Github上开源的一组免费的动画图标,可以将其简单的运用到网页中,而且代码及其简单,但是动画效果却很不错,动画图标和静态图标的不同之处在于它可以让你的网页更加富有活力,让产品更加具备视觉吸引力,一起来看看! 开源首页 https://github.com/icons8/titanic 如何安装使用? 安装使用及其简单,可以通过CDN或npm安装它: npm install titanic-icons --save 将代码引入你网页的he...

阅读全文>>

0

案例讲解 | 移动端的长表单应该如何设计?

基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单。针对于移动端长表单,我们应该如何去正确的设计呢?本文大纲:1.三种主方案2.主方案1的设计讨论3.主方案2的设计讨论4.主方案3的设计讨论5.总结1.三种主方案针对长表单的设计,按照设计思路的不同,可以分为三种主方案,如下所示:PS:图中的举例的关键字段仅仅为举例需要。主方案1:我们常见的设计形式,一个界面将所有表单信息展示出来。主方案2:将不同的分组表单放在不同的下一级界面,用户填写之后返回。主方案3:分步操作,一个界面完成一组表单内容,点击下一步进入下一组表单。2.主方案1的设计讨论主方案1的设计优缺点优点...

阅读全文>>

0

月薪过万必备:开发 CSS 最好的前端工具推荐

嘿,朋友!把你的注意力从方法和技术的洪流中移开一会,你就可能会错过什么!上周我遇到我的一个前端开发朋友,他很兴奋地跟我谈论他使用的一些新工具。其中最有意思的是使用 Grunt 来编译 SCSS。 人们很容易忘记不是每个人都和你走在同一条路上。他们或是有使用限制,或是视野狭窄,无法洞悉周遭的环境。我使用 Grunt 和使用 SCSS 一样久。听他讲起他不得不通过命令行可以手动触发编译之后,我很是痛苦。所以我想分享一些我经常使用的前端开发工具(尤其是CSS)和极为重要的前端开发工具。 1、文件查看和编译 首先,如果你还在使用命令行编译SASS,那肯...

阅读全文>>

0

Uncaught SyntaxError: Invalid or unexpected token

今天引入fontawesome样式文件的时候,增加了一行代码: <script type="text/javascript" src="/css/font-awesome.css"></script> 然后在页面上按awesome上写上代码: <i class="fa fa-camera-retro"></i> 结果不仅不显示,而且控制台出现报错: Uncaught SyntaxError: Invalid or unexpected token 一直在想,这么简单的一句代码,怎么会出现问题呢?有些纠结中,但一...

阅读全文>>

0

前端跨域9种解决方案大集合

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。 什么是同源策略? ...

阅读全文>>

2

js前端调用支付宝扫码(扫一扫按钮)功能

如何用js来调用支付宝的扫码功能呢,这篇文章简单的带你来实现一遍。 在html文档head标签中引用支付宝文档: <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> 在js中写入以下代码来调用支付宝扫一扫: var scanBtn = document.getElementById('scanBtn'); //调用支付宝扫一扫 scanBtn.onClick = functi...

阅读全文>>

0

CSS生成各种形状代码(爱心)

CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。 爱心 #heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; hei...

阅读全文>>

0

CSS生成各种形状代码(箭头)

CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。 箭头 #curvedarrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; transform: rotate(10deg); } #curvedarrow:afte...

阅读全文>>

0

CSS生成各种形状代码(三角形)

CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。 上三角 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 下三角 #triangl...

阅读全文>>