jQuery插件_跟随鼠标滑入滑出的蒙版

女爷i 2022-05-08 09:50 155阅读 0赞

效果：

![70][]

代码：

1、masking.js

jQuery.fn.extend({
    	masking:function(obj){	
    		this.each(function(){
    			if(!obj){
    				var obj = {};
    			}
    			//1、把当前div赋给属性
    			obj.$boxDomObj=$(this);
    			//2、给当前div增加蒙版
    			new Masking(obj);	
    		});
    	}
    });
    
    class Masking{
    	//构造函数
    	constructor(obj){
    		let defaultObj = {
    			$boxDomObj:null,
    			width:obj.$boxDomObj.width(),
    			height:obj.$boxDomObj.height(),
    			bgColor:"black",
    			opacity:0.5,
    			timeLong:200
    		};
    
    		for(let key in defaultObj){
    			this[key] = obj[key]?obj[key]:defaultObj[key];
    		}
    		this.$domObj = null;
    		//外面的位置
    		this.outPos={
    			"left":{left:-1*this.width,top:0},
    			"right":{left:this.width,top:0},
    			"top":{left:0,top:-1*this.height},
    			"bottom":{left:0,top:this.height}
    		}
    		this.createUI();
    		this.addEvent();
    	}
    	
    	//创建外观
    	createUI(){
    		this.$domObj = $("<div></div>");
    		this.$domObj.css({
    			margin:0,
    			position: "absolute",
    			left:-1*this.width,
    			top:0,
    			width: this.width,
    			height: this.height,
    			backgroundColor: this.bgColor,
    			opacity: this.opacity
    		});
    		this.$boxDomObj.append(this.$domObj);
    	}
    	
    	//添加事件
    	addEvent(){
    		this.$boxDomObj.mouseenter((event)=>{			
    			this.$domObj
    			.css(this.outPos[this.getDirection(event.offsetX,event.offsetY)])
    			.animate({left:0,top:0},this.timeLong);
    		});
    		
    		this.$boxDomObj.mouseleave((event)=>{			
    			this.$domObj
    			.animate(
    				this.outPos[this.getDirection(event.offsetX,event.offsetY)]
    				,
    				this.timeLong
    			);
    		});	
    	}
    	
    	getDirection(x,y){
    		//1、先判断方向
    		let dis={
    			left:x,
    			right:this.width-x,
    			top:y,
    			bottom:this.height-y
    		};
    		let direction="left";
    		for(let key in dis){
    			if(dis[key]<dis[direction]){
    				direction = key;
    			}
    		}
    		return direction;
    	}	
    }

2、html文件

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			div{
    				position: relative;
    				margin: 100px auto;
    				width: 200px;
    				height: 150px;
    				border: 1px solid black;
    				overflow: hidden;
    			}
    			img{
    				margin: 10px;
    				width:180px;
    				height: 130px;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<img src="img/img1.jpg" />
    		</div>
    		<br/>
    		<div>
    			<img src="img/img1.jpg" />
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/masking.js"></script>
    <script type="text/javascript">
    
    $(function(){
    	$("div").masking();
    });
    
    </script>

[70]: /images/20220508/28aab580a12d4258986919cabeb36b7d.png