“js实例”目录存档

小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日,星期二

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

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

阅读全文…

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

2016年12月31日,星期六

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

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

阅读全文…

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

2016年12月19日,星期一

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

阅读全文…

基于HTML5 drag/drop模块拖动插入排序删除完整实例

2016年11月15日,星期二

做了个基于HTML5 drag/drop模块拖动插入排序删除完整demo,非常适合作为学习案例,以及在此基础上定制属于自己的模块拖拽功能。

希望本文的内容可以帮助一些小伙伴节约开发时间和成本。

阅读全文…

基于clip-path的任意元素的碎片拼接动效

2016年06月7日,星期二

看电影的时候会有特效,反派被攻击的粉碎,依然可以零零碎碎的拼接成完整体。在网页中,我们可以使用类似的效果,而且使用CSS3就可以,而且可以让任意的元素有这种效果。不信?你点击去看看就知道了~~

阅读全文…

基于用户行为的图片等资源预加载

2016年06月4日,星期六

懒加载和本文要提到的预加载实际是不同的概念。

典型的懒加载,例如本博文章的图片,当用户滚动图片进入窗体的时候,才去加载;或者用户点击选项卡,原本隐藏的图片此时再去加载,这个也称之为懒加载。

而预加载则是,用户还没有行为发生,资源已经加载完毕,从这一定义来讲,我们传统图片啪啪啪全部加载完毕,本质上也是预加载,好处就在于,体验好啊,没有泛白或者菊花的出现。不足也很明显,那就是资源可能白白加载了。

那有什么办法可以把懒加载的省资源省流量和预加载良好体验结合在一起呢?

阅读全文…

小tip: 如何让contenteditable元素只能输入纯文本

2016年01月7日,星期四

利用全浏览器都支持的contenteditable模拟文本域可以实现体验相当不错的高度跟随内容自动撑开的效果,但是呢,有个很大的问题就是HTML内容可以直接被粘贴进去,如果我们希望只能输入纯文本,该怎么做呢?本文提供了CSS侧,HTML侧以及JS侧三种不同的解决方法,希望可以对您的学习或者工作有所帮助!

阅读全文…