我们将使用一个无序列表缩略图和描述覆盖图:
列表项将浮动左右有一个相对定位,因为我们将覆盖绝对描述:.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进出方向(想象一下每个方向的“检测”区域作为一个矩形分为四个三角形)。 你会发现在第二个演示我们出现了一点延迟,所以我们没有太多的动画发生当我们移动鼠标从一个极端到另一个角落。 我希望你喜欢这个小效果,觉得它有用!文件目录······
暂无数据
未经允许不得转载: ICode联盟 » 插件特效 » Css3和Jquery 鼠标悬浮图片效果
猜你喜欢
更多»
项目推荐
更多»
PDF电子书
更多»
Java多线程编程核心技术
(2)
Linux命令详解词典.pdf
(5)
深入Python3中文版
(0)
百度SEO一本通.pdf
(0)
mysql必知必会.pdf
(2)
疯狂JAVA讲义 pdf电子书
(3)
C# 图解教程pdf电子书
(3)
研磨设计模式 pdf电子书
(0)