JQuery方向意识悬停 HoverDir

来源：互联网发布：淘宝手机版编辑：程序博客网时间：2024/05/19 06:46

html代码

<ul id="da-thumbs" class="da-thumbs">    <li>        <a href="#">            <img src="images/list.jpg" />            <div><span>简介</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%;}

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代码

$(function() {$(‘#da-thumbs > li’).hoverdir();});$(‘#da-thumbs > li’).hoverdir( {hoverDelay : 50,reverse : true});

转载出处

0 0