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

微信浏览器下h5页面自动播放背景音乐

纯H5页面在手机端中是无法实现自动播放,移动端浏览器大部分是禁用video和audio的autoplay功能并且,很多移动浏览器也不支持首次js调用play方法进行播放(只有用户手动点播放后暂停,然后用代码进行play可以)。 这样做主要是为了防止不必要的自动播放浪费流量。 以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放 autoPlay……继续阅读 »

dayaoge 2年前 (2016-12-27) 1094浏览 2个赞

HTML5标签速查表

标签 描述 版本 属性 <!–…–> 定义注释 4 / 5 none <!DOCTYPE> 定义文档类型 4 / 5 none <a> 定义超链接,用于从一个页面链接到另一个页面。 4 / 5 href | hreflang | media | ping | r……继续阅读 »

dayaoge 2年前 (2016-09-05) 423浏览 0个赞

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个赞

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

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

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

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

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

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

HTML5 history API操作历史记录

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

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

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

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

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