今日、私は再びWebフロントエンドの画像カット効果を学びました。写真の特定の部分をフレーム化し、箱入り部分をプレビューする領域があります。
レンダリングは次のとおりです。
とてもクールに見えませんか
実装方法を簡単に紹介しましょう
1.レイアウトは、左右に2つのDIVです。右側のものは、主に左側にあると言うのが簡単です。左側のものは、絶対レイアウトで3つのレイヤーに分割されます。一番下の層は半透明の画像であり、中間層は元の画像ですが、1つのピースのみにカットされており、このピースのみが表示されます。クリップ：rectメソッドを使用して実装できます。その後、最上層は自分で書かれた境界線です。国境に8ポイントが追加され、これらの8ポイントの位置はそれぞれ定義されています。
2。その後、JSコードはマウスクリックイベントを使用して実装されます。
以下に独自のコードを投稿してください。
index.html（2つのJSファイル、すなわちjQueryとjquery-uiを参照する必要があります。その中で、jqueryはオンラインで参照できます。私はjquery-uiを自分で地元で引用しました。公式ウェブサイトで自分でダウンロードできます。
<！doctype html> <html> <head lang = "en"> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> picture </title> <script src = "http://cdn.bootcss.com/jjdid.-2.0/ type = "text/javascript"> </script> <script src = "js/jquery-ui-12.0/jquery-ui.min.js"> </script> <link href = "img.css" rel = "styleSheet" type = "text/css src="img.js"></script></head><body> <div id="box"> <img src="images/1.jpg" id="img1"> <img src="images/1.jpg" id="img2"> <div id="main"> <div id="left-up"></div> <div id="up"></div> <div id = "right-up"> </div> <div id = "right-down"> </div> <div id = "right-down"> </div> <div id = "left-down"> </div> <div id = "left"> </div> </div> <div> <div = "preview"> <img src = "imasim </div> </body> </html> img.css body {background-color：＃333;}＃box {position：absolute;トップ：200px;左：100px;幅：600px;高さ：319px;}＃img1 { /*不透明* /不透明：0.3;位置：絶対;上：0;左：0;}＃img2 {position：absolute;上：0;左：0; /*関数クリップ：rect（上、右、下、左）;上部は、クリップ領域の上部から画像の上部までの距離を表します。右上部は、クリップ領域の右から画像の左側の距離を表します。つまり、長さ +左下は、クリップ領域の下部から写真の上部までの距離を表します。 {位置：絶対;ボーダー：1pxソリッド#fff;幅：200px;高さ：200px;}＃preview {position：absolute;幅：600px;高さ：319px;トップ：200px;左：720px;}＃preview img { /*関数setpreviewの動作でクリップ関数を作成するには、IMGに絶対的な位置または相対的な位置付けを追加する必要がありますが、親要素は絶対的な位置付けであるため、これは絶対的な位置です* /位置：絶対;}。幅：8px;高さ：8px;バックグラウンドカラー：#fff;}。left-up {top：-4px;左：-4px; /*マウスの変更n-N-North w-west s-south e-east*/ cursor：nw-resize;}。up {/*最も近い位置が絶対または相対的である親要素の左側までの距離は、最も近い位置が絶対的または相対的な親要素の左の距離の50％です。 /*左-4pxまでの距離は、左4pxに移動することを意味します*/マージン左：-4px;上：-4px;カーソル：n-resize;}。右{右：-4px;上：-4px;カーソル：ne-resize;}。右{右：-4px;上：-4px;カーソル：ne-resize;}。右下{bottom：-4px;右：-4px;カーソル：se-resize;}。ダウン{左：50％;マージン左：-4px;下：-4px;カーソル：s-resize;}。左下{左：-4px;下：-4px;カーソル：sw-resize;}。左{下：50％;マージンボトム：-4px;左：-4px;カーソル：w-resize;} img.js //要素がwindow.onload = function（）{document.onselectstart = new function（ 'event.returnvalue = false;'）を正常に取得できるように要素をロードした後に実行する$（ "＃main"）。draggable（{canterment： 'parent'、drag：setChoice}）; var img = document.getElementById（ "IMG2"）; var rightdiv = document.getElementById（ "right"）; var updiv = document.getElementById（ "Up"）; var reftdiv = document.getElementById（ "left"）; var downdiv = document.getElementById（ "down"）; var leftupdiv = document.getElementById（ "left-up"）; var rightupdiv = document.getElementById（ "right-up"）; var rightdowndiv = document.getElementById（ "右下"）; var leftdowndiv = document.getElementById（ "left-down"）; var maindiv = document.getElementById（ "main"）; var ifkeydown = false; var contact = ""; // pressed接点ポイント//マウスダウン状態rightdiv.onmousedown = function（e）{/*ドラッグエフェクトによって導入されたjqueryとjquery-uiもマウスクリックイベントをトリガーします。したがって、定義するクリックイベントと導入したクリックイベントを防ぐために、eを渡して、バブルを防ぐために次のステートメントを追加します。バブルとは、マウスが要素*/ e.StopPropagation（）をクリックすると、親要素のいくつかのイベントもトリガーされることを意味します。 ifkeydown = true; contact = "right"; } updiv.onmousedown = function（e）{e.StopPropagation（）; ifkeydown = true; contact = "up"; } leftdiv.onmousedown = function（e）{e.StopPropagation（）; ifkeydown = true; contact = "left"; } downdiv.onmousedown = function（e）{e.StopPropagation（）; ifkeydown = true; contact = "down"; } leftupdiv.onmousedown = function（e）{e.StopPropagation（）; ifkeydown = true; contact = "left-up"; } rightupdiv.onmousedown = function（e）{e.StopPropagation（）; ifkeydown = true; contact = "right-up"; } rightdowndiv.onmousedown = function（e）{e.StopPropagation（）; ifkeydown = true; contact = "regdown"; } leftdowndiv.onmousedown = function（e）{e.stoppropagation（）; ifkeydown = true; contact = "left-down"; } //マウスのリリースステータスwindow.onmouseup = function（）{ifkeydown = false; } //マウスの動きイベントwindow.onmousemove = function（e）{if（ifkeydown == true）{switch（contact）{case "right"：rightmove（e）;壊す; case "up"：upmove（e）;壊す;ケース "left"：leftmove（e）;壊す;ケース「ダウン」：ダウンモーブ（e）;壊す;ケース「残り」：leftmove（e）; upmove（e）;壊す; case "right-up"：rightmove（e）; upmove（e）;壊す;ケース「右下」：rightmove（e）; Downmove（e）;壊す;ケース「残り」：leftmove（e）; Downmove（e）;壊す; }} setChoice（）; setPreview（）; } //右側の右側を移動する（e）{var x = e.clientx; //マウスx座標var addwidth = ""; //マウスが移動した後のマーキーの選択により幅が増加しましたvar widthbefore = maindiv.offsetwidth -2; //マーキーが変更される前の幅は、境界境界の幅を差し引くことであり、左側と右側が1pxであるため、2 addwidth = x -getposition（maindiv）.left //マウスの動きによって幅が増加した場合（widthefore <= img.width） //マーキーが変更された後の幅} else {maindiv.style.width = img.width + "px"; }} //動きfunction upmove（e）{var topbefore = maindiv.offsettop; var y = e.clienty; //マウス垂直座標var addheight = 0; var mainy = getposition（maindiv）.top; //選択マーキーの距離が画面の上部までaddheight = y -mainy; //高さの増加、var heightbefore = maindiv.offsetheight -2; var bottom = topbefore + heightbefore; var heightter = heightbefore -addheight; var topafter = maindiv.offsettop + addheight; if（topafter <bottom && topafter> -2）{maindiv.style.height = height after + "px"; maindiv.style.top = topafter + "px"; }} //左関数を移動しますleftmove（e）{//親要素の左側の左側の左側の左側の左側の左側の左側の左側の左側の左側から左側の左側の左側の左側の左側の距離は、maindiv.offsetLeft; //マウスからブラウザの左側までの距離var x = e.clientx; //増加した幅var addwidth = 0を定義します。 //変更前のクリップボックスの幅var widthbefore = maindiv.offsetwidth -2; //変更前のブラウザからの左の境界の距離var maindivleft = getposition（mainDiv）.Left; //親要素の左から右の境界の距離var right = leftbefore + widthbefore; // Changeの後のクリップボックスの幅var widther = widthbebefore -addwidth; //変更後の左からクリップボックスの距離var leftafter = maindiv.offsetLeft + addWidth; //左の境界が右の境界の外側の領域に移動するのを防ぎます（leftafter <右&& leftafter> -2）{//変更された幅maindiv.style.width = widthafter + "px"を定義します。 //変更後の左の親要素からの距離を定義しますmaindiv.style.left = leftafter + "px" }} //下位関数ダウンモーブ（e）{var y = e.clienty; var addheight = 0; var heightbefore = maindiv.offsetheight -2; addheight = y -getposition（maindiv）.top; if（heightbefore <= img.height）{maindiv.style.height = addheight + "px"; } else {maindiv.style.height = img.height + "px"; }} //画面の左に比べて要素の距離を取得するには、渡された要素関数getposition（node）としてoffsetLeft //ノードを使用します（ /*親要素に対する要素の左マージンを取得* / var左= node.offsetLeft; /*親要素に対する要素の上限を取得します*/ var top = node.offsettop; /*要素の親要素を取得*/ var parent = node.offsetparent; /*親要素が存在するかどうかを判断します。ある場合、左マージンが追加され、ブラウザの要素と左の境界の間の距離が計算されます*/ while（parent！= null）{/*ループは、親要素に対する子要素の左マージンを蓄積します*/左 += parent.offsetLeft; /*ループは、親要素に対する子要素の上限を蓄積します*/ top += parent.offsettop; /*ループ親要素がないまで親要素の親要素を取得します*/ parent = parent.offsetparent; } return {"left"：left、 "top"：top}; } //選択した領域を強調と可視機能に設定しますsetChoice（）{var top = maindiv.offsettop; var right = maindiv.offsetLeft + maindiv.offsetWidth; var bottom = maindiv.offsettop + maindiv.offsetheight; var left = maindiv.offsetLeft; img.style.clip = "rect（"+top+"px、"+right+"px、"+bottom+"px"+left+"px"+"）"} //プレビュー関数setpreview（）{var top = maindiv.offsettop; var right = maindiv.offsetLeft + maindiv.offsetWidth; var bottom = maindiv.offsettop + maindiv.offsetheight; var left = maindiv.offsetLeft; var img3 = document.getElementById（ "IMG3"）; img3.style.clip = "rect（"+ top+ "px、"+ right+ "px、"+ bottom+ "px"+ left+ "px"+ "）" img3.style.top = - （top）+ "px"; img3.style.left = - （左） + "px"; }}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。