网页特效

jquery拖动div 盒子拖拽效果jquery.mousewheel.js

位置:首页 > 网页特效 > 窗口特效,2017-11-15 20:56
这是jquery拖动div 按下鼠标时盒子拖拽效果jquery.mousewheel.js

jquery拖动div(图0)
<!DOCTYPE html>
<html lang="zh-cn" class="hb-loaded">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<style>
			*{ margin: 0; padding: 0;}
			body,html{ width: 100%; height: 100%; background: black; }
			.bigBox {
				width: 100%;
				height: 100%;
				position: relative;
				display: block;
			}
			
			.drag-box {
				width: 100px;
				height: 100px;
				background: pink;
				position: absolute;
				left: 50%;
				top: 50%;
				z-index: 5;
				border-radius: 3px;
			}
			
		</style>
	</head>

	<body>
		<div class="bigBox">
			<div class="drag-box">
			</div>
		</div>
		<script src="jquery.js"></script>
		<script src="jquery.mousewheel.js"></script>
		<script>
			
//拖拽、缩放
$(function(){
	var $drag=$(".bigBox")
	var $dragBox=$(".drag-box");
	var $smdragBox=$(".drag-box-small");
	var $cBtn=$(".s-btn");
	var tz=0;
	var bs = 100;
	var minWidth = $dragBox.outerWidth();
	var maxWidth = minWidth*3;
	
	$(document).bind("selectstart", function() {
		return false;
	});	
	$dragBox.mouseover(function(e){
		$dragBox.css({'cursor':'move'})
	});
	
  	$dragBox.mousedown(function(e){
	  	e.preventDefault();  
	    var positionDiv = $(this).offset();
	    var distenceX = e.pageX - positionDiv.left;
	    var distenceY = e.pageY - positionDiv.top;
	    
	    $(document).mousemove(function(e){
	    	e.preventDefault();  
    	
      var x = e.pageX - distenceX;
      var y = e.pageY - distenceY;

      if(x<0){
        x=0;
      }else if(x>$drag.width()-$dragBox.outerWidth(true)){
        x = $drag.width()-$dragBox.outerWidth(true);
      }
      if(y<0){
        y=0;
      }else if(y>$drag.height()-$dragBox.outerHeight(true)){
        y = $drag.height()-$dragBox.outerHeight(true);
      }
      $dragBox.css({
        'left':x+'px',
        'top':y+'px'
      });
    });
    $(document).mouseup(function(){
		e.preventDefault(); 
		$(document).unbind('mousemove');
		$(document).unbind('mouseup');

    });
  }).mousewheel(function(e,d){
		if(tz>=3 && d>0){
			tz=3;
			return;
		}else if(tz<=0 && d<0){
			tz=0;
			return;
		}
		tz += d;
  	 	var offset = $(this).offset();
	  	var w=$(this).outerWidth();
	  	var h=$(this).outerHeight();	
	 	var changePx = d*bs;
	 	if(w+changePx<minWidth || w+changePx>maxWidth){
	 		return;
	 	}
		$dragBox.css({
			'width':w+changePx+'px',
			'height':h+changePx+'px',
			'left':offset.left-changePx/2+'px',
			'top':offset.top-changePx/2+'px'
		});
  });
  
});
		</script>
	</body>

</html>


TAGS:jquery拖动div



猜你喜欢


NewHot手机版