jQuery插件,判断鼠标的移入移出方向
程序员文章站
2022-07-04 23:21:20
今天用jQuery封装了一个简单的插件，判断鼠标的移入移出方向，以后的项目中可能还会遇到这样一个简单的效果，就记录下来吧！ 先看结构和样式： 下面是封装的jquery.hover.js ;(function($){ $.fn.fangxiang = function(){ var disL = $( ......
今天用jquery封装了一个简单的插件，判断鼠标的移入移出方向，以后的项目中可能还会遇到这样一个简单的效果，就记录下来吧！
先看结构和样式：
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>判断鼠标移入移出方向</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.outer {
width: 400px;
height: 300px;
border: 2px solid orange;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.outer img{
width: 400px;
height: 300px;
}
.outer div {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
display: none;
line-height: 300px;
color: white;
}
</style>
</head>
<body>
<div class="outer">
<img src="timg.jpg">
<div class="mask">如果有来生，有没有人爱，我也要努力做一个可爱的人。</div>
</div>
<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.hover.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(".outer").fangxiang();
})
</script>
</body>
</html>
下面是封装的jquery.hover.js
;(function($){
$.fn.fangxiang = function(){
var disl = $(this).offset().left;
var disr = disl + $(this).outerwidth();
var dist = $(this).offset().top;
var disb = dist + $(this).outerheight();
$(this).hover(function(e){
var dirl = math.abs(e.clientx-disl);
var dirr = math.abs(e.clientx-disr);
var dirt = math.abs(e.clienty-dist);
var dirb = math.abs(e.clienty-disb);
var dir = math.min(dirl,dirr,dirt,dirb);
switch(dir){
case dirl:
$(this).find("div").show().css({"left":-$(this).outerwidth(),"top":0}).stop().animate({"left":0},500);
break;
case dirr:
$(this).find("div").show().css({"left":$(this).outerwidth(),"top":0}).stop().animate({"left":0},500);
break;
case dirt:
$(this).find("div").show().css({"top":-$(this).outerheight(),"left":0}).stop().animate({"top":0},500);
break;
case dirb:
$(this).find("div").show().css({"top":$(this).outerheight(),"left":0}).stop().animate({"top":0},500);
break;
}
},function(e){
var dirl = math.abs(e.clientx-disl);
var dirr = math.abs(e.clientx-disr);
var dirt = math.abs(e.clienty-dist);
var dirb = math.abs(e.clienty-disb);
var dir = math.min(dirl,dirr,dirt,dirb);
switch(dir){
case dirl:
$(this).find("div").stop().animate({"left":-$(this).outerwidth()},500);
break;
case dirr:
$(this).find("div").stop().animate({"left":$(this).outerwidth()},500);
break;
case dirt:
$(this).find("div").stop().animate({"top":-$(this).outerheight()},500);
break;
case dirb:
$(this).find("div").stop().animate({"top":$(this).outerheight()},500);
break;
}
})
}
})(jquery);
感觉写的不是很完美，需要借助我写的这个结构才能使用，请大神帮忙优化！
附上使用的图片timg.jpg