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 ...
随机推荐
- mysql根据经纬度求两地距离
#1.两点距离(1.4142135623730951) ,),point(,)); select st_distance(point (120.10591, 30.30163),point(120.1 ...
- hdu 3295 模拟过程。数据很水
An interesting mobile game Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Ja ...
- oracle数据同步
随着各行业信息化水平的不断提升,各种各样的信息管理系统都被广泛使用,各系统间数据完全独立,形成了大量的信息孤岛.出于管理及决策方面的需求,实现各平台的数据同步是一个很迫切的需求,TreeSoft数据库 ...
- 重构一段基于原生JavaScript的表格绘制代码
为了在CardSimulate项目中方便的显示技能和效果列表,决定重构以前编写的一段JavaScript代码——att表格绘制库,这段代码的作用是将特定的JavaScript数据对象转化为表格,支持精 ...
- 一文详解 Linux 系统常用监控工具(top,htop,iotop,iftop)
概 述 本文主要记录一下 Linux 系统上一些常用的系统监控工具,非常好用.正所谓磨刀不误砍柴工,花点时间总结一下是值得的! 本文内容脑图如下: top 命令 top 命令我想大家都挺熟悉吧! ...
- Pwn with File结构体（四）
前言 前面几篇文章说道,glibc 2.24 对 vtable 做了检测,导致我们不能通过伪造 vtable 来执行代码.今天逛 twitter 时看到了一篇通过绕过 对vtable 的检测 来执行代 ...
- JSON学习笔记-1
1.什么是JSON? JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一 ...
- shiro web 集成
集成方法 shiro与web集成,主要是通过配置一个ShiroFilter拦截所有URL,其中ShiroFilter类似于SpringMVC的前端控制器,是所有请求入口点,负责根据配置(如ini配置文 ...
- 类和类的关系——java
类(对象)之间的关系 1.继承关系(子类自动拥有了父类所有的成员变量和普通方法,如果父类的成员变量和普通方法是private 的,那么子类只有拥有权,没有使用权.父类的构造方法在子类的构造方法执行 ...
- 结对编程的感想&收获
关于结对编程的感想.感受,见我的另一篇随笔——<构建之法>结对编程 感想 下面我来谈谈本次结对编程的收获以及发现的问题 收获 ①这是我人生中第一次做UI界面设计,刚拿到这个题目还是比较 ...