video播放器JQUERY实现鼠标拖动伸缩

HTML代码

给父元素设置宽高，video宽高百分之百，缩放也是缩放父元素的大小

<div class="video">
	<video style="width: 100px;" controls>
		<source src="${FILE_PATH}" type="video/mp4">
	</video>
</div>

CSS样式

.video video{
	border-radius:10px;
	height:100%!important
}
.video:hover{ 
	cursor:n-resize;
}

js部分

1. 给父元素绑定鼠标按下和鼠标抬起事件

$('.video').mousedown(function(){   
    videoMove(true)
})
   	
$('.content-left').mouseup(function(){   //这是根元素
   	videoMove(false)
})

2.给浏览器绑定鼠标移动事件

function videoMove(flag){
   		if(flag){
   			$(document).mousemove(function(e){
   				var zix=e.pageY;   //当前鼠标Y轴的坐标
   				var videoHeight=$('.video').height()  //父元素的高度
   				var videoTop=$('.video').offset().top　//父元素到浏览器顶部的绝对距离
   				var videoMoveHeight=(zix-videoTop-videoHeight)+videoHeight  //需要移动的距离
   				 $('.video').height(videoMoveHeight)  //设置父元素的高度
   			}) 
   		} else{
   			$(document).unbind("mousemove")  //当鼠标松开时需要清除浏览器的鼠标移动事件
   		}
   	}

第一次写个人博客，希望对看到的朋友们有帮助~