<!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>
為什么向下移動會和想做移動一樣的？為什么？
天翼翱翔
2017-04-20 11:59:18