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 ...
随机推荐
- 深入理解JVM之JVM内存区域与内存分配
深入理解JVM之JVM内存区域与内存分配 在学习jvm的内存分配的时候,看到的这篇博客,该博客对jvm的内存分配总结的很好,同时也利用jvm的内存模型解释了java程序中有关参数传递的问题. 博客出处 ...
- VS本地调试 Visual Studio远程调试监视器（MSVSMON.EXE）的32位版本不能用于调试64位进程或64位转储
vs2017 调试一致都没啥问题,今天莫名报这个错误,感觉好奇怪,网上搜索了半天也没解决,最后看着错误信息感觉很诡异,我本地调试你给我启动远程调试监测器干嘛,localhost也访问不了,ping了一 ...
- CSS流体(自适应)布局下宽度分离原则——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...
- webpack开发工具
source map 用来调试打包后的代码 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack- ...
- less之旅
在遇到less之前,一直和css交往,当less出现在我码农生涯的时候,被她给深深地吸引.从此,less成了自己码农生活里面的一房,css退居二房!那么,less到底有什么魅力让我如此迷上她呢? le ...
- Retrofit+RxJava(2)-基本使用
首先是抽象的基类 public abstract class BaseApi { public static final String API_SERVER = "服务器地址" p ...
- ETH智能合约测试
ETH的智能合约一般用Solidity语言编写,懂点基本solidity语法会更好地测试 测试中需要用到的工具: 一份智能合约 Remix(一个在线IDE,用来编译.编辑.部署智能合约,需要FQ才能使 ...
- mybatis 的动态SQL
在XML 中支持的几种标签: • if • choose.when.otherwise • where • set • trim • foreach OGNL 表达式 1. el or e22. el ...
- Pig group用法举例
group语句可以把具有相同键值的数据聚合在一起,与SQL中的group操作有着本质的区别,在SQL中group by字句创建的组必须直接注入一个或多个聚合函数.在Pig Latin中grou ...
- hornor8改user模式为debug模式
在学习Android软件安全的过程中,经常要用到Android的动态调试.但是呢,一般的Android应用在发布的时候都是发布版的不能直接被调试,为了能使Android应用能够支持调试就需要对Andr ...