SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件
接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉。
话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动加窃喜,因为看到间歇地有一些来自世界各地的访客,那感觉真是乡下二狗子刚进城啊,现在看来好二。
Inspired By
首先要介绍的是灵感来自于,嗯,介绍一下还是有必要的,因为创意这东西,有时候比实际的产品更有意义,也让我们反思为毛外国友人们更具创造性,我们的思维太僵化勒!
最初是受到国外某大大写的一个简单DEMO的启发,但我忘了当时是搜什么来着,反正就看到了这个页面,一看我去,This is fucking awesome!然后他刚好有教程讲解如何实现的,但一看,讲得太简单,之后凭一时兴致研究了下也感觉没怎么弄清,也就不了了这了。毕竟当时还没有编写插件的能力啊。
后来又是一个偶然情况下,还是记不得在网上搜什么来着,又在CODEPEN上看到了这个DEMO,,我去,This's really fucking pretty cool!!,太爱了,爱得不行了就想占有啊。一搜也没有相关jQuery插件来实现,这是个机会啊,填补国内外空白。我没有多想,动手开干!
后来陆续发现一些网站已经在使用这样的效果了,比如大百度的图片搜索结果里面:
因为自己亲自实现过,所以感觉看到后感觉很亲切,不会像第一次见到时那么惊叹了。
插件一定要简单
其实第一个DEMO里面原作者提供的代码已经可以让我们实现这样的方向感知遮罩效果发,只是没有文档,同时使用起来也不方便,需要特定的HTML结构,再引入一些特定的样式表,最后再调用插件代码,反正就是作者只是写了个Demo目的在于展示效果,并没有给出一个像样的插件吧。
所以我一开始写插件就定了个准则:一定要简单易用!
我指的简单是用户只需引入插件代码,然后调用插件方法,完事。
而平时见到的多数jQuery插件,需要你引入插件样式表,有的还需要插件提供的图片什么的,个人觉得最麻烦让人不想去碰的插件莫过于连HTML格式都要求你必需要怎样写,还要在某些元素身上指定样式类或者data属性插件才能生效,当然像特定的界面UI部件要除外,那是没办法,你HTML不按指定的格式写就不好生成这些部件,比如Slider啦,Accordion等。
而对于这样一个图片效果的插件,至少HTML不需要要求吧,插件代码直接到页面去找图片,找到了就把效果应用上去,跟具体HTML布局依赖不那么紧密,而且可以不单独引入样式表吧,能在代码里完成的工作就尽量不要增加插件使用者的负担了。
不过我在实现SlipHover的时候,正是因为坚持不写一个单独的样式表文件遇到了些问题:
- 一是图片遮罩位置的定位问题,由于实际页面环境很复杂,并且窗口尺寸变化后图片的位置也可能变化,最后解决方法将遮罩用容器包裹定位同时监听window的resize事件,在图片变化后重新定位;
- 二是在实现那个3D遮罩效果的时候,通过JavaScript创建的CSS3动画无法实现3D,没办法,最后的解决办法是在代码里面向页面添加<style>标签,把3D这部分的CSS3动画样式添加到页面,从而避免了写到一个单独的CSS文件里面跟随插件一起才能使用。
在插件简单性方面我见过比较有借鉴意义的是以前做项目用过的一个叫photobooth.js的插件,用于在js中调用摄像头给用户拍照,这个插件整个就一个js文件,样式表通过js创建添加到页面,甚至图片都转成dataURL存成文本形式含在了这个js文件里面。
而在极简方面做得最究极的莫过于这样的插件:你只需在页面引入插件代码,然后甚至都不用调用什么,插件就生效了!比如用于显示页面加载进度效果的Pace.js。这跟插件需要实现的具体功能也有关系,像这样一个监听页面加载进度然后在页面展示出来的效果,确实也不需要你额外再写代码去调用什么的,全自动。
3D效果遮罩
最开始是没有往插件里加入这个3D遮罩效果的,因为嫌CODEPEN那个例子的代码是SCSS源码且稍复杂,同时看着也累就没去研究了。后来深入接触了CSS3动画还有各种变形啊什么的之后,受到了启发,也许可以不借鉴别人的,自己用CSS3来做。
一开始我不太自信能成,所以开始写了这么一个单独的DEMO(点击可全屏查看)确定一切可行之后,再加到了SlipHover里面,做成了一个选项,默认是2D平移的图片遮罩,当传递filp:true到插件时,就启用这个3D翻动遮罩了。Look,fucking perfect!
在线演示及源码
项目GitHub地址:https://github.com/Wayou/SlipHover
在线演示:http://wayou.github.io/SlipHover/
SlipHover参数及选项,以及使用方法可以去文档页面查看:http://wayou.github.io/SlipHover/
喜欢的友人们一定要去星我(star me)或者叉我(fork me)支持一把啊~
浏览器兼容性
能很好地工作在较新的浏览器中,IE需9+,同时3D翻动效果在IE里效果呈现得不是很好。
插件收录情况
下面是SlipHover在各社区网站收录情况的不完全统计,纯属无聊加蛋疼才整理的。
- Unheap : http://www.unheap.com/media/images/sliphover
- jquery-plugins: http://jquery-plugins.net/sliphover-direction-aware-hover-animation-to-images
- jquery plugin center,需自己提交 :http://plugins.jquery.com/sliphover/
- jquer : http://jquer.in/jquery-plugins-for-awesome-image-galleries/sliphover/
- the design blitz : http://thedesignblitz.com/best-jquery-plugins-of-the-week-5th-january-18th-january/
- bashooka : http://bashooka.com/coding/cool-jquery-image-hover-plugins/
Reference:
- Direction aware hover effect on iamges: http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/index2.html
- Direction aware hover 3D effect demo from CODEPEN: http://codepen.io/taufnrsyd/7pen/ufcdG
- Algorithm on how to determine the direction of the mouse when hover on an element from stackoverflow: http://stackoverflow.com/questions/3627042/jquery-animation-for-a-hover-with-mouse-direction
SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件的更多相关文章
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- 图片上传jQuery插件(兼容IE8)
图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg html <!DOCTYPE html> <ht ...
- css3实现图片遮罩效果鼠标hover以后出现文字
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 使用css鼠标移动到图片放大效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- javascript - 简单实现一个图片延迟加载的jQuery插件
最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧. ...
- jquery 鼠标经过延时触发事件,jquery插件
jquery 鼠标经过延时触发事件. 用来做:鼠标经过选项卡,延时切换,鼠标经过商城分类延时显示,最好不过,防止用户随便滑动就切换了选项卡. 一.引入jq 二.加入以下插件代码 /* * 鼠标经过延时 ...
- 基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
随机推荐
- 来自MarsEdit的博客测试
使用MarsEdit编辑的第一个测试博客. 希望我们一帆风顺! 插图,在插图时可以调整尺寸: 六种公式写法,记得要在选项中打开-启用数学公式: \begin{equation}\sum\end{e ...
- Maven 整合 spring profile实现多环境自动切换
Maven 整合 spring profile实现多环境自动切换 时间:2014-03-19 15:32来源:Internet 作者:Internet 点击:525次 profile主要用在项目多环境 ...
- .NET J2EE APP全局会话架构运用场景
.NET J2EE APP全局会话架构运用场景, 全局会话运用拓扑图代码核心架构为.NET架构开发C#语言为主代码架构分为全局会话中心.ASP.NET会话节点..NET会话节点针对WCF服务器与APP ...
- IOS 6和 IOS7适配的一些问题
由于在做一个ios的通用设计平台,那么客户端解析的时候就涉及到一些ios不同版本,不同分辨率的适配问题 首先碰到的就是navigation bar中的item的背景色的问题 在ios7中设置setti ...
- Sharepoint添加顶部导航菜单
网站设置->导航->全局导航添加链接->设置标题和url->保存
- CentOS详解top命令各个数据的含义
最近在docker(宿主机是centos虚拟机)里安装gitlab,发现随着时间的运行,虚拟机的内存持续走高,运行几个小时之后内存已经爆掉了,putty远程处理于假死状态. 这个时候就需要查看内存进程 ...
- 仿QQ列表左滑删除
一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...
- 从零开始学IOS开发
从今天开始开一个坑,由于业务变动,要开始学习IOS开发进行IOS app开发,其实鄙人本身就是一只菜鸟加大学狗,有过两年的C#,ASP.NET MVC,微信公众平台开发经验,一只在继续努力着,从大三下 ...
- Testng之使用@DataProvider注解做数据驱动【转】
原文:http://www.jianshu.com/p/8e333a0ec42a 前两天学了一下@DataProvider,今天有时间总结一下.testng很强大,提供了很多注解,其中利用@DataP ...
- Java中if语句,嵌套使用 一道面试题
偶然看到这道题,起初还迷糊了,特此记录 int a = 100;if(a < 100) if(a < 200){ System.out.println("a < 200&q ...