• 欢迎访问大姚哥前端笔记
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

最新发布 第4页

全栈之路姚辉涛个人网站,前端学习笔记,前端知识分享,全栈工程师的自我修养,前端笔记

CSS3

rem在chrome下最小字体限制导致布局错乱【天天踩坑】

话说chrome已经废弃了-webkit-text-size-ajust:none很久了,这导致chrome浏览器无法显示12px以下的字体了,因为chrome觉得12px以下的字体在桌面设备上不利用用户阅读。(这又是何必呢,不要拿你的想法左右我们 )。 这就导致我们设置的html{font-size:62.5%}在chrome浏览器里解释相当于html{……继续阅读 »

dayaoge 2年前 (2016-08-31) 866浏览 0个赞

HTML5

JS实现移动端顶部下拉刷新

实现原理:内容#bodyBox,头部刷新#loading。头部top值设为负的div高度。当页面下拉时,分别设置#bodyBox和#loading的Y轴位移,使loading显示,完全显示时,执行加载ajax,执行完成隐藏#loading。 (loading动画如有侵权请联系我) 扫码在手机上体验。 项目详细已托管至github: 附源代码: <……继续阅读 »

dayaoge 2年前 (2016-08-29) 738浏览 2个赞

HTML5

HTML5模拟原生顶部下拉图片变大效果

看到好多APP产品展示页顶部一个焦点图,滚动条位于顶端时,我们再往下拉时图片就会变大。感觉效果挺棒的。就想着用HTML5来实现,终于实现了,效果见下图。 扫码在手机上体验。 原理应该就是当滚动条位于顶点时,如果往下拉,则禁用系统默认滚动e.preventDefault();。 原理听起来挺简单。那怎么判断是往下拉呢? 判断手指下滑 1、首先我们定义四……继续阅读 »

dayaoge 2年前 (2016-08-26) 702浏览 1个赞

HTML5

HTML5 history API操作历史记录

   之前我们可能用基于hash的导航来实现不刷新的情况下接管页面的浏览历史记录,但是带#号的url总归不是那么美观。HTML5提供了对History操作。 只要通过history.pushState()和history.replaceState()两个函数配合window.onpopstate来实现。pjax也是基于这个原理实现的。……继续阅读 »

dayaoge 2年前 (2016-08-25) 741浏览 0个赞

程序人生

java web项目页面ajax请求成功但显示404

最近调用微信服务号消息推送接口,java给做了个controller,获取accessa_token,openId,请求发送推送消息。 post数据也能传到后台,微信消息也能接收到,但前端页面返回404。 想想,之前的那么多Ajax请求也是这么写的,都能成功,难道这次是微信接口的问题?可是微信也有数据返回啊 找后台Java看到下班也没发现问题,我这门外汉也……继续阅读 »

dayaoge 2年前 (2016-08-23) 555浏览 1个赞

前端工具

三步快速打造属于自己的gulp前端开发环境

此版本包含功能有:实时刷新,sass编译,css压缩,js压缩,图片压缩,html压缩等 用法 github地址 这个脚手架是用node-sass来编译sass文件的,so,得先安装node-sass模块。如果使用npm安装不成功,可以试试淘宝的cnpm。这里就不过多介绍如何安装了。 安装完node-sass   1、 在项目目录clon……继续阅读 »

dayaoge 2年前 (2016-08-12) 774浏览 0个赞

前端工具

使用gulp快速构建只有实时刷新功能的开发环境

对于简单的网站或者说是传统网站来说,我们交付给phper或java的代码都应该是未压缩版的。那么好多gulp的插件我们是用不到的,这里我们只用browser-sync来实现自动刷新的功能,来快速搭建我们的开发环境。 如何安装gulp这里就不介绍了。 基础版 github地址 用法   1、 在项目目录clone上面的地址 git c……继续阅读 »

dayaoge 2年前 (2016-08-11) 544浏览 1个赞

HTML5

利用object解决img图片加载失败显示默认图片问题

图片加载失败显示默认图片的方法有很多,可以用img的onerror,这个用的时候需要小心,容易陷入死循环。可以服务端处理,出错的话,推送一个默认图片等等。这里不过多讨论其他的方法,介绍下利用object的方法。 object元素最大的优点是可以包含备用的内容,在指定内容显示不出来的时候显示。 举个栗子: <object data="../……继续阅读 »

dayaoge 2年前 (2016-08-08) 739浏览 1个赞

移动开发

retina屏幕下1px细线边框的解决方案

1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px。由其影响美感。 还好,时代总是进步的。也许很多人都不知道, 现在IOS8下,已经支持0.5px了。 。 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码 div{ bo……继续阅读 »

dayaoge 2年前 (2016-07-19) 1336浏览 4个赞