jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
更新时间：2018年08月28日 15:12:03 作者：邹大叔
这篇文章主要介绍了jQuery实现的响应鼠标移动方向插件用法,涉及jQuery响应鼠标事件及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现的响应鼠标移动方向插件用法。分享给大家供大家参考，具体如下：
HTML代码如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>www.jb51.net jQuery响应鼠标移动</title>
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
div{font-family:"Microsoft YaHei";}
html,body{width:100%; height:100%; background:#f2f2f2;}
ul{margin-left:50px;}
ul li{float:left;}
ul li .outer{width:300px; height:250px;}
ul li .outer .inner{width:300px; height:250px; background:rgba(0, 0, 0, .3);}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/09.jpg" width="300px" height="250px" />
<div class="inner">
我是图片1
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/010.jpg" width="300px" height="250px" />
<div class="inner">
我是图片2
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/011.jpg" width="300px" height="250px" />
<div class="inner">
我是图片3
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/012.jpg" width="300px" height="250px" />
<div class="inner">
我是图片4
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/013.jpg" width="300px" height="250px" />
<div class="inner">
我是图片5
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/014.jpg" width="300px" height="250px" />
<div class="inner">
我是图片6
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/015.jpg" width="300px" height="250px" />
<div class="inner">
我是图片7
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/016.jpg" width="300px" height="250px" />
<div class="inner">
我是图片8
</div>
</div>
</li>
</ul>
<script>
(function($){
$.fn.extend({
show : function(div){
var w = this.width(),
h = this.height(),
xpos = w/2,
ypos = h/2,
eventType = "",
direct = "";
this.css({"overflow" : "hidden", "position" : "relative"});
div.css({"position" : "absolute", "top" : this.width()});
this.on("mouseenter mouseleave", function(e){
var oe = e || event;
var x = oe.offsetX;
var y = oe.offsetY;
var angle = Math.atan((x - xpos)/(y - ypos)) * 180 / Math.PI;
if(angle > -45 && angle < 45 && y > ypos){
direct = "down";
}
if(angle > -45 && angle < 45 && y < ypos){
direct = "up";
}
if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && x > xpos){
direct = "right";
}
if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && x < xpos){
direct = "left";
}
move(e.type, direct)
});
function move(eventType, direct){
if(eventType == "mouseenter"){
switch(direct){
case "down":
div.css({"left": "0px", "top": h}).stop(true,true).animate({"top": "0px"}, "fast");
break;
case "up":
div.css({"left": "0px", "top": -h}).stop(true,true).animate({"top": "0px"}, "fast");
break;
case "right":
div.css({"left": w, "top": "0px"}).stop(true,true).animate({"left": "0px"}, "fast");
break;
case "left":
div.css({"left": -w, "top": "0px"}).stop(true,true).animate({"left": "0px"}, "fast");
break;
}
}else{
switch(direct){
case "down":
div.stop(true,true).animate({"top": h}, "fast");
break;
case "up":
div.stop(true,true).animate({"top": -h}, "fast");
break;
case "right":
div.stop(true,true).animate({"left": w}, "fast");
break;
case "left":
div.stop(true,true).animate({"left": -w}, "fast");
break;
}
}
}
}
});
})(jQuery)
$(".outer").each(function(i){
$(this).show($(".inner").eq(i));
});
</script>
</body>
</html>
其中控制响应鼠标方向的JS代码如下：
/*
*使用说明：
* $(".a").show($(".b"))
* a是展示层，b是遮罩层
* b在a的内部
*/
$(".outer").each(function(i){
$(this).show($(".inner").eq(i));
});
这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun运行代码，可得到如下效果：
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
下面小编就为大家带来一篇jQuery操作属性和样式详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-04-04
本文给大家汇总介绍了几个常用的jquery实现简易的移动端验证表单，非常的实用，有需要的小伙伴可以进来参考下。2015-11-11
本文主要介绍了jquery,js简单实现类似Angular.js双向绑定的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这个插件主要用于解决IE5.5与IE6.0下面的png图片无法透明的解决方法，如果您的网站使用了png图片而且访客很大一部分是IE7之前的版本，可以使用这个。2010-08-08
下面小编就为大家分享一篇jquery实现侧边栏左右伸缩效果的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
没想到jquery这次居然更新这么快，jquery1.4的教程我还没有发二周，jquery1.4.2就发布了。这次jquery1.4.2更新的内容主要是性能和新增了一些新的API。2010-02-02
本文主要对jquery 中的ajax方法进行概述讲解。具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
这篇文章主要介绍了HTML页面如何弹出居中可拖拽的自定义窗口层,需要的朋友可以参考下2014-05-05
each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量2012-12-12
浅谈jQuery before和insertBefore的区别
下面小编就为大家带来一篇浅谈jQuery before和insertBefore的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
最新评论