js鼠标拉出选框

<style type="text/css">
	#d{
		position:absolute;
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00));
		border:1px dashed #f00;
		width:0;
		height:0;
		opacity:0.5;
	}
	#d:focus{
		cursor:default;
	}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
  $(function(){
	var ismove=false;
	var x,y;
	$(document).mousedown(function(e){
		ismove=true;
		x=e.pageX;
		y=e.pageY;
		$("#d").attr("style","").css({"left":x,"top":y});
	}).mousemove(function(e){
		if(ismove){
			var mx=e.pageX-x;
			/*if(e.pageX>$(window).width()-10){
				mx=$(window).width()-x;
			}*/
			var my=e.pageY-y;
			/*if(e.pageY>$(window).height()-10){
				my=$(window).height()-y;
			}*/
			if(mx<0){
				$("#d").css("left",x+mx);
			}
			if(my<0){
				$("#d").css("top",y+my);
			}
			$("#d").css({width:Math.abs(mx),height:Math.abs(my)});
		}
	}).mouseup(function(){
		ismove=false;
	}).contextmenu(function(){
		return false;
	});
  });
</script>
<div id="d">
</div>

  

posted on 2013-10-20 17:12  yuanxiaowa  阅读(347)  评论(0)    收藏  举报

导航