技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> HoverDir响应鼠标移动方向的悬停效果插件

HoverDir响应鼠标移动方向的悬停效果插件

浏览:4252次  出处信息

之前的一篇文章JS判断从哪个方向判断进入一个容器中提到了一个效果,通过计算鼠标位置以及一些数学方法,来判断鼠标是从哪个方向进入以及离开该容器的。今天我这里搜索到一个不错的实战效果,分享给大家。是基于jquery的一个插件。该效果出品人是老外,原文地址

该效果用到的几点技术,一个是css3的动画效果,这里不是采用的js的动画效果,所以兼容性存在不足。另外就是之前提到的针对进入方向的判断。

效果演示地址:http://www.niumowang.org/demo/hoverDir/

 代码构成,HTML标签部分

<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
            <img src="images/7.jpg" />
            <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
        </a>
    </li>
    <li>
        <!-- ... -->
    </li>
    <!-- ... -->
</ul>
 代码构成,CSS部分
.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%;
}
需要注意的是隐藏的div是决定定位的,所以他的父元素就要采用relative相对定位。

CSS动画关键部分,采用css3的动画效果,以及添加方向的class

.da-thumbs li a div.da-animate {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/* 动画开始阶段的class */
.da-slideFromTop {
    left: 0px;
    top: -100%;
}
.da-slideFromBottom {
    left: 0px;
    top: 100%;
}
.da-slideFromLeft {
    top: 0px; 
    left: -100%;
}
.da-slideFromRight {
    top: 0px;
    left: 100%;
}
/* 动画结果阶段的class: */
.da-slideTop {
    top: 0px;
}
.da-slideLeft {
    left: 0px;
}
动画的js脚本部分

脚本部分,就是引入jquery文件,引入该插件。然后调用该插件即可。

$(function() {
$('#da-thumbs > li').hoverdir();
});
该插件支持动画效果,延迟动画效果,和反向
$('#da-thumbs > li').hoverdir( {
hoverDelay : 50,
reverse : true
});
hoverDelay是延迟加载时间,越大时间越长。reverse是是否反向,true表示反向,默认false

效果演示地址:http://www.niumowang.org/demo/hoverDir/

建议继续学习:

  1. 用javascript悬停效果改善你的在线商店的12种方法    (阅读:2587)
  2. 经验分享-导航鼠标悬停状态小效果    (阅读:1899)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1