css中clip的使用

css中的clip就是剪切指定区域比如clip:rect(50px 100px 100px 50px); ，想象成4条线，上、右、下、左。一般用来图片显示：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>图片切割</title>
<style>
  *{margin:0px;padding:0px}

  #baseDiv{
    width:104px;
    height:140px;
    background:url('3.jpg');
    filter:alpha(opacity=40);
    text-align:center;
    margin:auto;
  }
  #dragDiv{
    position:absolute;
    margin-left:49px;
    margin-top:49px;
    width:51px;
    height:51px;
    border:1px dotted black;
    cursor:move;
    background:url('noexist.png');
    z-index:99;
  }

  #clipDiv{
    position:absolute;
    clip:rect(50px 100px 100px 50px); //想象成4条线，上、右、下、左
  }
</style>
<script>
  window.οnlοad=function(){
    var dragDiv = document.getElementById("dragDiv");
    var baseDiv = document.getElementById("baseDiv");
    
    dragDiv.capture = false;

    dragDiv.οnmοusedοwn=function(){
      //dragDiv.style.marginTop = "99px";
      //写在html中可以直接通过上面读取
      var x = event.clientX;
      var y = event.clientY;

      //alert(x+","+y);
      dragDiv.lastPt = {x:x,y:y};
      dragDiv.capture = true;
    };

    dragDiv.οnmοusemοve=function(){
      if(!dragDiv.capture){
        return;
      }

      var x = event.clientX;
      var y = event.clientY;

      var _top = parseInt(dragDiv.currentStyle.marginTop);
      var _left = parseInt(dragDiv.currentStyle.marginLeft);

			var width = parseInt(dragDiv.currentStyle.width);
			var height = parseInt(dragDiv.currentStyle.height);
			
			var top = _top + (y-dragDiv.lastPt.y);
			var left = _left + (x-dragDiv.lastPt.x);
			var right = left + width;
			var bottom = top + height;
			
			var baseWidth = parseInt(baseDiv.currentStyle.width);
			var baseHeight = parseInt(baseDiv.currentStyle.height);
			
			if(top<0||left<0 || right>baseWidth || bottom> baseHeight){
				return;
			}
			
      dragDiv.style.marginTop = top;
      dragDiv.style.marginLeft = left;

      dragDiv.lastPt = {x:x,y:y};
			
      clipDiv.style.clip = "rect("+top + "px " + right +"px "+ bottom + "px "+ left + "px"+")";

      window.status = top + "," + left;
    };
    
    dragDiv.onmouseup = function(){
      //alert("up");
      dragDiv.capture = false;
    }
  }
</script>
</head>
<body>
<div id="baseDiv">
  <div id="dragDiv"></div>
  <div id="clipDiv">
    <img src="3.jpg" width="104px" height="140px"/>
  </div>
</div>
</body>
</html>

效果如下:

tomatozq

发布了38 篇原创文章 · 获赞 4 · 访问量 19万+

私信关注

猜你喜欢