随笔分类 - jQuery
摘要：在前两章，为了方便调试，我们写了一个非常简单的 jQuery.fn.init 方法： 因此我们在 demo 里执行 $('div') 时可以取得这么一个类数组对象： 在完整的 jQuery 中通过 $(selector) 的形式获取的对象也基本如此 —— 它是一个对象而非数组，但可以通过下标（如 $
阅读全文
摘要：在上篇文章我们简单实现了一个 jQuery 的基础结构，不过为了顺应潮流，这次咱把它改为模块化的写法，此举得以有效提升项目的可维护性，因此在后续也将以模块化形式进行持续开发。 模块化开发和编译需要用上 ES6 和 rollup，具体原因和使用方法请参照我之前的《冗余代码都走开——前端模块打包利器 R
阅读全文
摘要：从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅途，在整个系列的实践中，我们会把 jQuery 的主要功能模块都了解和实现一遍。 这会是一段很长的历程，但也会很有意思 —— 作为前端领域的经典之作，jQuery 里有着太多奇思妙想，如果能够深入理解它，对于我们稳固js基础、提升前端大法技
阅读全文
摘要：项目后端觉得autoComplete响应略慢，于是花了两天时间写了这插件，基于jQuery 1.7+，仓库地址 https://github.com/VaJoy/smartComplete ，欢迎各种star。要注意的是，smartComplete只处理从后端接收到响应数据的情况就生成数据选择列表的...
阅读全文
摘要：图片查看器，github地址：https://github.com/VaJoy/imgViewer效果如下：这款当初大概写了2小时，有点匆忙地赶出来的，使用的接口很简单：$.bindViewer(".viewer-item");它的实现其实也没啥复杂的原理，唯一觉得可说的地方是图片展开的过程 —— ...
阅读全文
摘要：现在就职于一家P2P平台，自然也会关注同行其它网站的前端技术，今天要仿造的是礼德内页的一个图片查看器效果。不过说白了，无论人人贷也好礼德财富也好，很多地方的前端都做的不尽如人意，比如忽略细节、缺乏交互、滥用插件，像今天要仿造的图片查看器，礼德财富也是直接套用的一款叫fancybox的插件：个人觉得一...
阅读全文
摘要：中午看《众妙之门》看到一个响应式图片处理工具（点此查看）的介绍，然后就心血来潮想着不妨自己写一个基于JQ的吧，于是就又有了这么一个干货给大家。smartImg的全部文件可以从我的Github上下载，其实它非常小巧，去掉注释一共也就40行，之所以这么轻便，JQ也是帮了大忙。应用场景我们在搭建响应式页面...
阅读全文
摘要：差不多是从七月开始有空就写一写，写到现在也算是可以拿出来展示了，vajoyJS是一款可以提供多项建站常用UI功能的插件库，让你轻松创建简易幻灯片、模态窗口和单屏滚页等效果。vajoyJS依赖于 jQuery 和 base.css，可以在Github（欢迎各种star或fork）下载最新版本，内有各种...
阅读全文
摘要：今天的项目需要做到一个介绍页面，我主动提出走单屏滚页的风格，毕竟交互性好，逼格也高，具体效果可以参照百度知道书籍预售页面。其实现效果就大概是这样的：还是老样子，所有步骤文件可以从我的Github上下载。原理滚页的方式肯定是通过animate来实现，由被点击的a标签索引来确定要从哪一页滚至哪一页的位置...
阅读全文
摘要：最近工作真心忙碌，几乎没时间写博客。今天趁周末来仿一个QQ头像裁剪功能插件。效果如下：所有文件都可在我的Github上下载，从头到尾从简到繁按步骤一共分了9个HTML文件，每个步骤文件里的注释都写的很清楚，故在本博客内不赘述。原理：主要是通过css的clip来裁剪图片可视区域，拖动剪裁窗口这里使用了...
阅读全文
摘要：今天要克隆的前端特效非常有意思，可以参见GitHub404页面https://github.com/vajoy/master/index.html记得之前华为在站酷发布EMUI设计大赛的主页也用了这种特效。说简单点，就是鼠标在页面移动时，banner上的图片呈现有层次的空间轴动特效，效果图如下：咱们...
阅读全文
摘要：今天要扒的是腾讯网站地图页面（http://www.qq.com/map/）页卡滚动效果，见下图有兴趣的童鞋可以去那页面试一试，其动画效果见下图：那么先理下思路：上方的按钮对应下方的某个栏目，点击某按钮时，其对应的栏目（暂且称为A吧）滚到最上方，原本在A前方的栏目则在滚动结束后自动跳到最后面（这里要...
阅读全文
摘要：昨晚想仿造下音悦台首页“返回顶部”的小超人效果，觉得这东西的实现很简单，应该不会费时超过一个钟。结果撸代码的过程发现存在很多意想不到的问题。先发个图：有兴趣的朋友可以去音悦台点一下这个小超人图标试一试，默认是隐藏的，滚动条下拉一小段距离后会从下面飞上来悬停在右下角，点击的时候不但浏览器滚动条会返回顶...
阅读全文
摘要：京东首页的楼层图标默认是灰色的，但拉动滚动条，让该图标从下方挪动到屏幕正中的时候，该图标会显示出从上到下由灰变绿的动画效果，如下图这种效果很有Lazyload的范，也是挺吸引眼球的交互方式，下面用JQ来仿造下这种效果的实现方式，其实挺简单。首先我是做了2个gif分别作为图标的默认状态和动画状态（注意...
阅读全文
摘要：今天扒皮下京东商品展示区的一个特效：大家可以自行去京东看下特效，下面是这个特效的动态图（这次聪明的我懂得给图加水印了）理下思路，每个分类选项卡宽度一致，且有一条灰色底边，然后默认有一条红色的色标让它漂浮在首个选项卡上面（其中的小三角形可以自己做个图），默认首个选项卡的文本（像上图是“AAA”）为红色...
阅读全文
摘要：知乎首页有个交互还蛮有意思，当用户在左侧头像区选择某个头像的时候，右侧内容区域会依据鼠标在头像所留经的时间来决定是否显示所停留头像的对应内容：今天简单说下用JQ完成这个交互的思路。先照例写下HTML/CSS，整俩div分别作为头像元素和内容区域元素： 这里是头像 这里是内容区域接下来是JQ部分： 1 function changetext(){ 2 $(".neirong").text('hahaha'); 3 } 4 5 $(function(){ 6 $(".touxiang").hover(function(){ 7 timeout
阅读全文
摘要：这几天一直在给一家电商搞前端开发，首页做DIV页面重构的时候自然地做到每个电商平台都会有的部分——产品分类菜单栏，如下图截的是淘宝的效果：其实实现鼠标移到左侧主分类（我们暂且称之为A部分）便显示出右侧详细分类部分（称之为B部分）的功能并不困难，但这里不得不说主流的电商平台在这个地方都有个很好的用户体...
阅读全文
