建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery响应鼠标移动方向的悬停效果插件jquery.hoverdir.js

来源:易助科技网浏览量:23收藏

简介


jquery.hoverdir.js是一款非常不错的响应鼠标移动方向的悬停效果工具,移动过渡效果非常的自然。


JQuery响应鼠标移动方向的悬停效果插件jquery.hoverdir.js-示例图



使用


1.  引入 jquery.js 和 jquery.hoverdir.js 文件


2.  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%;}


3.  调用


$(function() {$(‘#da-thumbs > li’).hoverdir();});



相关链接


官网地址 : https://github.com/webmandesign/jquery.hoverdir

演示地址 :https://www.jq22.com/yanshi23028