Css3和Jquery 鼠标悬浮图片效果-插件特效-ICode联盟

我们将使用一个无序列表缩略图和描述覆盖图:

Natalie & Justin Cleaning by Justin Younger

列表项将浮动左右有一个相对定位,因为我们将覆盖绝对描述:.da-thumbs li { float: left; margin: 5px; background: #fff; padding: 8px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.1);}.da-thumbs li a,.da-thumbs li a img { display: block; position: relative;}.da-thumbs li a { overflow: hidden;}.da-thumbs li a div { position: absolute; background: rgba(75,75,75,0.7); width: 100%; height: 100%;}我们要做的是以下几点:根据我们正在进入的地方用鼠标,我们将运用各自的“从”风格,将正确的初始位置的叠加。然后我们将应用过渡,然后添加最后一个国家的风格,以便覆盖幻灯片。当我们离开元素时,我们将再次运用各自的“从”风格(尽管现在我们实际上是滑动)和删除前面的最终状态的风格。所以,我们的小插件的核心是下列标准this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) { var $el = $( this ), $hoverElem = $el.find( 'div' ), direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ), styleCSS = self._getStyle( direction ); if( event.type === 'mouseenter' ) { $hoverElem.hide().css( styleCSS.from ); clearTimeout( self.tmhover ); self.tmhover = setTimeout( function() { $hoverElem.show( 0, function() { var $el = $( this ); if( self.support ) { $el.css( 'transition', self.transitionProp ); } self._applyAnimation( $el, styleCSS.to, self.options.speed ); } ); }, self.options.hoverDelay ); } else { if( self.support ) { $hoverElem.css( 'transition', self.transitionProp ); } clearTimeout( self.tmhover ); self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed ); } } );　我们基本上把‘mouseenter’和‘mouseleave’事件的列表项和function_getDir进出方向(想象一下每个方向的“检测”区域作为一个矩形分为四个三角形)。　　你会发现在第二个演示我们出现了一点延迟,所以我们没有太多的动画发生当我们移动鼠标从一个极端到另一个角落。　　我希望你喜欢这个小效果,觉得它有用!

Css3和Jquery 鼠标悬浮图片效果

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

未经允许不得转载： ICode联盟 » 插件特效 » Css3和Jquery 鼠标悬浮图片效果

猜你喜欢更多»

项目推荐更多»

[开源]基于 Vue、Datav、Echart 框架的数据大屏项目，可自由替换 (1)

[开源]一套企业级微服务框架、微服务能力开放平台，功能强大 (0)

[开源]免费开源的流程设计器，开箱即用，助力流程开发使用更简单 (0)

[开源]MIT开源协议，前后端分离、美观大方后台通配权限管理系统 (1)

[开源]一款终端仿真软件，支持多种后端协议，无依赖跨平台使用 (0)