<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用javascript实现图片切割效果</title> <style> body{background:#333;} #wrap{ width:480px;height:300px; margin:0 auto;position:absolute;left:200px;top:100px; } #myImg1{ opacity:0.1;filter:alpha(opacity=10); position:absolute;left:0;top:0; } #myImg2{ position:absolute;left:0;top:0; clip:rect(0,200px,200px,0); } #main{ width:200px;height:200px;border:1px solid #fff;position:absolute; cursor:move; } .mainX{ width:8px;height:8px;background:#fff; position:absolute; } .a{left:-4px;top:-4px;cursor:nw-resize;} .b{left:50%;top:-4px;margin-left:-4px;cursor:n-resize;} .c{left:100%;top:-4px;margin-left:-4px;cursor:ne-resize;} .d{left:-4px;top:50%;margin-top:-4px;cursor:w-resize;} .e{left:100%;top:50%;margin-top:-4px;margin-left:-4px;cursor:e-resize;} .f{left:-4px;top:100%;margin-top:-4px;cursor:sw-resize;} .g{left:50%;top:100%;margin-top:-4px;margin-left:-4px;cursor:s-resize;} .h{left:100%;top:100%;margin-top:-4px;margin-left:-4px;cursor:se-resize;} </style> <script type="text/javascript"> window.onload=function(){ var oMain=document.getElementById("main"); var oRight=document.getElementById("right"); var oUp=document.getElementById("up"); var oLeft=document.getElementById("left"); var content=""; var flag=false; var oDw=document.getElementById("down"); oRight.onmousedown=function(){flag=true;content="right";} oRight.onmouseup=function(){flag=false;content="right";} oUp.onmousedown=function(){flag=true;content="up";} oUp.onmouseup=function(){flag=false;content="up";} oLeft.onmousedown=function(){flag=true;content="left";} oLeft.onmouseup=function(){flag=false;content="left";} oDw.onmousedown=function(){flag=true;content="down";} oDw.onmouseup=function(){flag=false;content="down";} window.onmousemove=function(e){ if(flag==true){ if(content=="right"){ var s= e.clientX; var addWidth=""; var mainBefore=oMain.offsetWidth-2; addWidth=s-getPosition(oMain).left-mainBefore; oMain.style.width=addWidth+mainBefore+"px"; } else if(content=="up"){ var s1= e.clientY; var addHeight=""; var mainBefore=oMain.offsetHeight-2; addHeight=getPosition(oMain).top-s1; oMain.style.height=addHeight+mainBefore+"px"; oMain.style.top=oMain.offsetTop-addHeight+"px"; } else if(content="left"){ var s= e.clientX; var addWidth=""; var mainBefore=oMain.offsetWidth-2; addWidth=getPosition(oMain).left-s; oMain.style.width=addWidth+mainBefore+"px"; oMain.style.left=oMain.offsetLeft-addWidth+"px"; }else if(content="down"){ var s1= e.clientY; var addHeight=""; var mainBefore=oMain.offsetHeight-2; addHeight=s1-getPosition(oMain).top-mainBefore; oMain.style.height=addHeight+mainBefore+"px"; } } } } function getPosition(node){ var left=node.offsetLeft; var top=node.offsetTop; var cur=node.offsetParent; while(cur!=null){ left+=cur.offsetLeft; top+=cur.offsetTop; cur=cur.offsetParent; } return {"left":left,"top":top}; } </script></head> <body> <div id="wrap"> <img src="f8.jpg" id="myImg1"> <img src="f8.jpg" id="myImg2"> <div id="main"> <div class="mainX a"></div> <div class="mainX b" id="up"></div> <div class="mainX c"></div> <div class="mainX d" id="left"></div> <div class="mainX e" id="right"></div> <div class="mainX f"></div> <div class="mainX g" id="down" style="background:#f00;"></div> <div class="mainX h"></div> </div> </div></body></html>
添加回答
举报
0/150
提交
取消