jQuery鼠标悬停
(function ($) {
$.fn.hoverdir = function(options){
var options = $.extend({
choice : ".cove"
},options);
return this.each(function(){
var self = $(this);
self.hover(function(e){
mouseMove(e,self,true);
},function(e){
mouseMove(e,self,false);
});
function mouseMove(e,element,bool){ //光标、元素、布尔
var top = element.offset().top; //元素top距离浏览器顶部距离
var bottom = top + element.height(); //元素bottom距离浏览器顶部距离
var left = element.offset().left; //元素left距离浏览器左边距离
var right = left + element.width(); //元素right距离浏览器左边距离
var x = e.pageX; //光标当前横向x位置
var y = e.pageY; //光标当前纵向y位置
//光标当前横纵向位置减去元素各方位距离(取最小值) = 将要显示的方向
var sT = Math.abs(y - top);
var sB = Math.abs(y - bottom);
var sL = Math.abs(x - left);
var sR = Math.abs(x - right);
var current = Math.min(sT,sB,sL,sR); //取元素最小值从而进行switch排除
var choices = element.find(options.choice); //获取需要选择的元素
switch (current){
case sT:
if(bool){
choices.css({left:0,top:'-100%'}).animate({top:0},200);
}else{
choices.stop(1,1).animate({top:'-100%'},200);
}
break;
case sB:
if(bool){
choices.css({left:0,top:'100%'}).animate({top:0},200);
}else{
choices.stop(1,1).animate({top:'100%'},200);
}
break;
case sL:
if(bool){
choices.css({left:'-100%',top:0}).animate({left:0},200);
}else{
choices.stop(1,1).animate({left:'-100%'},200);
}
break;
case sR:
if (bool){
choices.css({left:'100%',top:0}).animate({left:0},200);
}else{
choices.stop(1,1).animate({left:'100%'},200);
}
break;
}
}
});
}
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{ background-color:#2A2A2A;}
li{list-style: none;}
#wrap{width: 800px;margin:100px auto;}
#wrap ul li{float: left;margin: 5px;width: 230px;height: 360px;position: relative;overflow: hidden;}
#wrap ul li .cove{width: 230px;height: 220px;position: absolute;background: url(img/new-bg.png);padding: 140px 0 0 0;top: 100%;left: 100%;}
#wrap ul li .cove p{font-size: 14px;color:#fff;text-align: center;}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li>
<img src="img/1.png" />
<div class="cove">
<p>pci1</p>
<p>Picture info 1</p>
</div>
</li>
<li>
<img src="img/2.png" />
<div class="cove">
<p>pci2</p>
<p>Picture info 2</p>
</div>
</li>
<li>
<img src="img/3.png" />
<div class="cove">
<p>pci3</p>
<p>Picture info 3</p>
</div>
</li>
<li>
<img src="img/4.png" />
<div class="cove">
<p>pci4</p>
<p>Picture info 4</p>
</div>
</li>
<li>
<img src="img/5.png" />
<div class="cove">
<p>pci5</p>
<p>Picture info 5</p>
</div>
</li>
<li>
<img src="img/6.png" />
<div class="cove">
<p>pci6</p>
<p>Picture info 6</p>
</div>
</li>
</ul>
</div>
<script src="../jquery.min.js"></script>
<script src="hoverdir.js"></script>
<script>
$("#wrap ul li").hoverdir();
</script>
</body>
</html>
不多说，可以通过需求拓展功能。
jQuery鼠标悬停的更多相关文章
- jQuery鼠标悬停内容动画切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery鼠标悬停3d菜单展开动画
效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...
- 基于jQuery鼠标悬停上下滑动导航条
基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="menu2& ...
- jQuery鼠标悬停文字渐隐渐现动画效果
jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...
- jQuery鼠标悬停图片放大显示
jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...
- jQuery鼠标悬停显示提示信息窗体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery鼠标悬停事件hover()
在JQuery中提供了.hover()事件,hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave,即表示可以为hover传递两个参数.如下代码所示: $( & ...
- 简单jquery 鼠标悬停提示效果
记得自己引入jq插件哦~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- Jquery鼠标悬停按钮图标动态变化效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- SSM(Spring+SpringMVC+Mybstis)搭建，写给新手
SSM框架——详细整合教程(Spring+SpringMVC+MyBatis) 作用: SSM框架是spring MVC ,spring和mybatis框架的整合,是标准的MVC模式,将整个系统划分为 ...
- Differences between page and segment
https://techdifferences.com/difference-between-paging-and-segmentation-in-os.html how does paging so ...
- 深入理解MyBatis的原理（三）：配置文件用法（续）
前言:前文讲解了 MyBatis 的配置文件一部分用法,本文将继续讲解 MyBatis 的配置文件的用法. 目录 1.typeHandler 类型处理器 2.ObjectFactory 3.插件 4. ...
- manven springmvc 项目中 slf4j 的配置使用（结合log4j 或者 logback）
前言:每个maven springmvc 都应该有日志功能,SLF4J(Simple logging facade for Java)就是一种日志规范,它提供了一个共通接口,可以适配多种不同的LOG实 ...
- 通过ifrmae异步下载文档
//通过ifrmae异步下载文档 function iframeGetFile(opts) { var defaultOpts = { filePath: '', onload: function ( ...
- CSS中vertical-align的默认值baseline的理解
写在前面的话 在学校业余学习了一个月的CSS,人生中第一篇博客就献给CSS了,欢迎大家指正文章中不正确的地方,在此感谢.在尝试开始写博客的时候查了好多资料,原本以为写自己熟悉的知识的博客很容易,没想到 ...
- html--对URL传参数进行解析
跳转页面需要传参数到另外一个html页面,跳转链接可写一个js的function function doView(articleId) { window.location.href ="co ...
- 清除浮动以及:after元素
http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html 以上这篇示意图把清除浮动的几种方法讲的非常清楚了,其中 ...
- opencv3.2.0 分离颜色通道&多通道图像混合
##名称:分离颜色通道&多通道图像混合 ##平台:QT5.7.1+OpenCV3.2.0 ##时间:2017年12月11日 /***************创建QT控制台程序********* ...
- xcrun: error: invalid active developer path (/Applications/Xcode.app/Contents/Developer)解决办法
背景 mac下卸载了xcode,使用git等命令时就提示错误.invalid active path(Applications/Xcode.app/Contents/Developer),这种情况可以 ...