“js相关”目录存档

利用HTML5 Web Audio API给网页JS交互增加声音

2017年06月10日,星期六

HTML5 Web Audio API可以让我们无中生有创造声音,而且是各种音调的声音,换句话说,我们通过JavaScript就会创建一个完整的音乐出来,这可能和我们以前的认知有些不一样,例如点击按钮出现一个点击的音效,传统思维可能是需要JS触发一个<audio>音频文件的播放,实际上,并不需要任何额外的资源,十几行JS代码就可以搞定,而这就是本文要介绍的内容。

阅读全文…

jquery.guide.js新版上线操作向导镂空提示jQuery插件

2017年05月18日,星期四

网站上线或者改版的时候,常常会做一个操作向导,告诉用户一些重要操作到了哪里,或者什么地方隐藏了什么好玩的东西,等等,虽然我都是直接关掉的,或者快速跳过,但是对有部分用户而言还是很有用的。

这种提示比较好的交互效果是采用镂空的半透明遮罩,视觉重点一目了然,类似这样……

阅读全文…

使用electron构建跨平台Node.js桌面应用经验分享

2017年05月16日,星期二

最近,把团队内经常使用的一个基于Node.js制作的小工具给做成了可视化操作的桌面软件,使用的是electron,这里简单分享一下使用electron的一些经验和心得。

阅读全文…

小tips: 页面链接跳转历史URL不记录的兼容处理

2017年02月15日,星期三

我们点击首页的“分类”进入分类页,然后分类页头部有个“男生”“女生”的频道切换,这两个都是直接的链接,如果就会带来这么一个问题,如果用户在“男生”“女生”的频道之间反复切换,则当我们点击左上角的返回按钮(如下图)的时候,就会发现点击很多次还是在“分类页”上,这其实是不符合用户预期的,正常的用户预期应该是点击左上角的返回按钮应该直接回到首页,而不是还在当前页过家家。

要实现思路并不难,就是“男生”“女生”频道切换的时候,URL地址不要进入历史URL记录堆栈,但如何实现同时保证各个浏览器都兼容是个问题,本文就将展示相关的实践,希望对大家的学习能够有所帮助。

阅读全文…

JS获取上一访问页面URL地址document.referrer实践

2017年02月13日,星期一

但是最近做了一个移动端项目,是我第一次在正式项目中使用document.referrer,这里跟大家分享一下相关的实践。

场景是这样的,移动端无论是原生app还是传统的网页,返回上页是一个比较强烈的需求,几乎所有的内页都有这么一个返回上一页的按钮。大部分场景下,上面办法可以满足我们的交互需求,但是,在有些时候……

阅读全文…

开源移动端元素拖拽惯性弹动以及下拉加载两个JS

2017年01月25日,星期三

开源两个起点中文网M站两个动效交互JS,封装良好,即插即用。一个是任意元素屏幕拖移外带惯性边缘弹动效果,另外一个是基于窗体的下拉释放加载刷新效果。

阅读全文…

分享一个即插即用的私藏缓动动画JS小算法

2017年01月17日,星期二

……实际开发的时候,使用的最多的还是最初的那个她,不仅是因为她给我带来了很多美好的回忆,更重要的是这么多年过去了,她一直保持着那份简单,和外面的那些妖艳*货完全不一样。

而这个相伴自己最久,最无法忘怀的、使用最多的她就是本文要分享的私藏的动画小算法……

阅读全文…

HTML5语音合成Speech Synthesis API简介

2017年01月13日,星期五

HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthesis)”,这两个名词听上去很高大上,实际上指的分别是“语音转文字”,和“文字变语音”。各有作用,各有千秋,兼容性也有差异……

阅读全文…

web移动端浮层滚动阻止window窗体滚动JS/CSS处理

2016年12月31日,星期六

最近做移动端项目,遇到个类似的需求,就是,在众多web浏览器中,当我们出现一个浮层,浮层里面也有滚动条的时候,且有部分背景半透明的时候,就会发现,当我们滚动浮层里面的小滚动条的时候,背后整个页面都跟着一起滚走了。

后来发现,要让后面的窗体不滚动还不是那么简单的……

阅读全文…

如何使用Tween.js各类原生动画运动缓动算法

2016年12月19日,星期一

Tween.js是一个包含各种经典动画算法的JS资源,之前在多篇文章有提到过,AS中甚至有专门的Tween类,但是之前仅仅是提一下,并未详细介绍如何使用,这里,就是专门介绍Tween类中各种算法如何使用,如何应用与实际,以及分享下基于Tween.js写的一个更简单易懂更容易调用的animation.js,希望本文的内容能够对大家的学习有所帮助。

阅读全文…