لقد تعلمت اليوم تأثير قطع الصور للواجهة الأمامية على الويب مرة أخرى. هناك منطقة لتأطير جزء معين من الصورة ومعاينة الجزء المحاصر.
العروض كما يلي:
ألا تبدو رائعة جدًا
دعونا نقدم بإيجاز طريقة التنفيذ
1. التصميم هو اثنين من divs على اليسار واليمين. من السهل قول واحد على اليمين ، بشكل رئيسي على اليسار. تنقسم تلك الموجودة على اليسار إلى ثلاث طبقات في تصميم مطلق. الطبقة السفلية هي صورة شفافة ، والطبقة الوسطى هي الصورة الأصلية ، ولكن يتم تقطيعها إلى قطعة واحدة فقط ، ويتم عرض هذه القطعة فقط. يمكنك استخدام المقطع: طريقة المستقيم لتنفيذه. ثم الطبقة العليا هي الحدود التي كتبها بنفسك. تتم إضافة 8 نقاط إلى الحدود ، ويتم تعريف المواقف لهذه النقاط الثمانية على التوالي.
2. ثم يتم تنفيذ رمز JS باستخدام حدث النقر بالماوس.
انشر الكود الخاص بك أدناه:
index.html (نحتاج إلى الرجوع إلى ملفين JS ، وهما jquery و jquery-ui. من بينهما ، يمكن أن تشير jQuery إلى الإنترنت.
<! doctype html> <html> <head lang = "en"> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"> <title> cutting picture </title> <script src = "http://cdn.bootcss.come/jquery/jquery/jquery/jquery/jquery> type = "text/javaScript"> </script> <script src = "js/jquery-ui-1.12.0/jQuery-ui.min.js"> </script> <link href = "img.css" rel = "stylesheet" type = css "/> script = 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" id = "right-up"> </viv> <div id = "right-down"> </viv> <div id = "right-down"> </viv> <div id = "lever-down"> </viv> <div id = "left"> </viv> </viv> </div> <div id = "ferefiew"> img src = </viv> </body> </html> img.css body {background-color: #333 ؛} #box {position: absolute ؛ أعلى: 200 بكسل ؛ اليسار: 100px ؛ العرض: 600 بكسل ؛ الارتفاع: 319px ؛}#img1 { /*opatity* / opatited: 0.3 ؛ الموقف: مطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛}#img2 {الموضع: Absolute ؛ أعلى: 0 ؛ اليسار: 0 ؛ /*مقطع الوظيفة: المستقيم (أعلى ، يمين ، أسفل ، يسار) ؛ يمثل الجزء العلوي المسافة من الجزء العلوي من منطقة المقطع إلى أعلى الصورة يمينًا يمثل المسافة من يمين منطقة المقطع إلى يسار الصورة ، أي أن الطول + القاع الأيسر يمثل المسافة من أسفل منطقة المقطع إلى أعلى الصورة ، أي ، وفرس + أعلى). مطلق الحدود: 1px الصلبة #FFF ؛ العرض: 200 بكسل ؛ الارتفاع: 200px ؛}#معاينة {الموضع: Absolute ؛ العرض: 600 بكسل ؛ الارتفاع: 319px ؛ أعلى: 200 بكسل ؛ اليسار: 720px ؛}#معاينة IMG { /*لجعل وظيفة المقطع في عمل SetPreview دالة ، تحتاج إلى إضافة تحديد المواقع المطلق أو تحديد المواقع النسبية إلى IMG ، ولكن بما أن العنصر الأصل هو تحديد المواقع المطلقة ، فإن هذا هو تحديد المواقع المطلقة* / الموضع: Absolute ؛} العرض: 8px ؛ الارتفاع: 8 بكسل ؛ خلفية اللون: #fff ؛}. Left-up {top: -4px ؛ اليسار: -4px ؛ /*تغيير الماوس n-n-north w-w-west s-south e-east*/ cursor: nw-resize ؛}. Up {/*المسافة إلى يسار العنصر الأصل الذي يكون أقرب موقعه هو المطلق أو النسبي هو 50 ٪ من المسافة إلى يسار العنصر الأصل الذي يكون موقعه الأقرب المطلق أو النسبي 50 ٪*/ يسار: 50 ٪ ؛ /*تعني المسافة إلى اليسار -4px الانتقال إلى اليسار 4px*/ margin -left: -4px ؛ أعلى: -4px ؛ المؤشر: n-resize ؛}. يمين {يمين: -4px ؛ أعلى: -4px ؛ المؤشر: ne-resize ؛}. يمين {يمين: -4px ؛ أعلى: -4px ؛ المؤشر: ne-resize ؛}. اليمين {أسفل: -4px ؛ اليمين: -4px ؛ المؤشر: se-resize ؛}. أسفل {يسار: 50 ٪ ؛ الهامش اليساري: -4px ؛ أسفل: -4px ؛ المؤشر: s-resize ؛}. اليسار إلى أسفل {يسار: -4px ؛ أسفل: -4px ؛ المؤشر: sw-resize ؛}. اليسار {القاع: 50 ٪ ؛ القاع الهامش: -4px ؛ اليسار: -4px ؛ المؤشر: w-resize ؛} img.js // تنفيذ بعد تحميل العنصر للتأكد من أن العنصر يمكنه الحصول على window.onload بنجاح =) $ ("#main"). draggable ({containment: 'parent' ، drag: setChoice}) ؛ var img = document.getElementById ("img2") ؛ var rightDiv = document.getElementById ("right") ؛ var updiv = document.getElementById ("up") ؛ var leftDiv = document.getElementById ("left") ؛ var downdiv = document.getElementById ("down") ؛ var LeftUpdiv = document.getElementById ("Left-up") ؛ var ebuitupdiv = document.getElementById ("right-up") ؛ var levingdowndiv = document.getElementById ("Right-Down") ؛ var leftDownDiv = document.getElementById ("أسفل اليسار") ؛ var maindiv = document.getElementById ("main") ؛ var ifkeydown = false ؛ var contact = "" ؛ // يشير إلى نقطة التلامس المضغوطة // الماوس أسفل الحالة اليمنى. لذلك ، من أجل منع حدث النقر الذي تحدده وحدث النقر الذي قدمته ، تمرير في E وإضافة العبارة التالية لمنع الفقاعات. الفقاعة تعني أن بعض أحداث العنصر الأصل سيتم تشغيلها أيضًا عندما ينقر الماوس على العنصر*/ estoppropagation () ؛ ifkeydown = صحيح ؛ Contact = "Right" ؛ } updiv.onmousedown = function (e) {E.StopPropagation () ؛ ifkeydown = صحيح ؛ Contact = "Up" ؛ } leftDiv.OnmousedOwN = function (e) {eStOpPropagation () ؛ ifkeydown = صحيح ؛ Contact = "Left" ؛ } downdiv.onmousedown = function (e) {E.StopPropagation () ؛ ifkeydown = صحيح ؛ Contact = "Down" ؛ } LeftUpdiv.onmousedown = function (e) {eStopPropagation () ؛ ifkeydown = صحيح ؛ Contact = "Left-up" ؛ } rightupdiv.onmousedown = function (e) {E.StopPropagation () ؛ ifkeydown = صحيح ؛ contact = "right-up" ؛ } QuitdownDiv.OnmousedOwN = function (e) {eStopPropagation () ؛ ifkeydown = صحيح ؛ Contact = "Right-Down" ؛ } leftDownDiv.OnmousedOwn = function (e) {eStopPropagation () ؛ ifkeydown = صحيح ؛ contact = "اليسار إلى أسفل" ؛ }. }. استراحة؛ حالة "UP": Upmove (e) ؛ استراحة؛ حالة "اليسار": Leftmove (E) ؛ استراحة؛ حالة "Down": DownMove (E) ؛ استراحة؛ حالة "اليسار": LeftMove (E) ؛ upmove (e) ؛ استراحة؛ حالة "اليمين": rightmove (e) ؛ upmove (e) ؛ استراحة؛ حالة "اليمين": rightmove (e) ؛ Downmove (E) ؛ استراحة؛ حالة "اليسار إلى أسفل": Leftmove (E) ؛ Downmove (E) ؛ استراحة؛ }} setChoice () ؛ setPreview () ؛ } // حرك الجانب الأيمن الأيمن (e) {var x = e.clientx ؛ // mouse x إحداثي var addwidth = "" ؛ // زاد العرض عن طريق اختيار السرادق بعد تحريك الماوس var widthbefore = maindiv.offsetwidth - 2 ؛ // العرض قبل تغيير السرادق ، يتم طرح 2 هو طرح عرض الحدود الحدودية ، والجوانب اليسرى واليسرى هي 1px ، لذلك هو 2 addwidth = x - getPosition (maindiv) .Left // زيادة العرض من خلال تحركات الماوس إذا (widthbefore <= img.width) // العرض بعد تغيير السرادق} آخر {maindiv.style.width = img.width + "px" ؛ }} // نقل الدالة upmove (e) {var topbefore = maindiv.offsettop ؛ var y = var mainy = getPosition (maindiv) .top ؛ // مسافة سرادق التحديد إلى أعلى الشاشة addheight = y - mainy ؛ // زيادة الارتفاع ، var heightbefore = maindiv.offsetheight - 2 ؛ var bottom = topbefore + heightbefore ؛ var heightafter = heightbefore - addheight ؛ var topafter = maindiv.offsettop + addheight ؛ if (topafter <bottom && topafter> -2) {maindiv.style.height = heightafter + "px" ؛ maindiv.style.top = topafter + "px" ؛ }} // حرك الدالة اليسرى اليسرى (e) {// المسافة من الجانب الأيسر من العنصر الأصل قبل الجانب الأيسر من الجانب الأيسر من الجانب الأيسر من العنصر الأصل var leftbefore = maindiv.offsetleft ؛ // المسافة من الماوس إلى الجانب الأيسر من المتصفح var x = e.clientx ؛ // تحديد زيادة العرض var addwidth = 0 ؛ // عرض مربع المقطع قبل تغيير var widthbefore = maindiv.offsetWidth - 2 ؛ // مسافة الحدود اليسرى من المتصفح قبل التغيير var maindivleft = getPosition (maindiv) .Left ؛ // مسافة الحدود اليمنى من يسار العنصر الأصل var right = leftbefore + widthbefore ؛ // عرض مربع المقطع بعد تغيير var widthafter = widthbefore - addWidth ؛ // مسافة مربع المقطع من اليسار بعد تغيير var leftafter = maindiv.offsetleft + addwidth ؛ // منع الحدود اليسرى من الانتقال إلى المنطقة خارج الحدود اليمنى إذا كان (LeftAfter <right && leftafter> -2) {// تحديد العرض maindiv.style.width = widthafter + "px" ؛ // تحديد المسافة من العنصر الأصل الأيسر بعد التغيير maindiv.style.left = leftafter + "px" ؛ }} // حرك الوظيفة السفلية DownMove (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" ؛ } آخر {maindiv.style.height = img.height + "px" ؛ }} // احصل على مسافة العنصر بالنسبة إلى يسار الشاشة ، واستخدم العقدة OffsetLeft // كدالة العنصر المنقولة getPosition (العقدة) { /*احصل على الهامش الأيسر للعنصر بالنسبة للعنصر الأصل* / var left = node.offsetleft ؛ /*احصل على الهامش العلوي للعنصر بالنسبة للعنصر الأصل*/ var top = node.offsettop ؛ /*احصل على العنصر الأصل للعنصر*/ var parent = node.offsetParent ؛ /*الحكم على ما إذا كان العنصر الوالد موجود. إذا كان هناك ، يتم إضافة الهامش الأيسر ويتم حساب المسافة بين العنصر والحدود اليسرى للمتصفح*/ بينما (الوالد! = null) {/*loop تتراكم الهامش الأيسر للعنصر الطفل بالنسبة للعنصر الأصل*/ left += parent.offsetleft ؛ /*حلقة تتراكم الهامش العلوي للعنصر الطفل بالنسبة للعنصر الأصل*/ TOP += PARTER.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"+")"} // function function 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 أكثر.