{"id":7,"date":"2025-08-04T09:44:06","date_gmt":"2025-08-04T01:44:06","guid":{"rendered":"http:\/\/1666.webi.svipwebs.com\/?page_id=7"},"modified":"2025-09-04T17:42:13","modified_gmt":"2025-09-04T09:42:13","slug":"elementor-7","status":"publish","type":"page","link":"https:\/\/1666.webi.svipwebs.com\/index.php\/elementor-7\/","title":{"rendered":"Elementor #7"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Add Your Heading Text Here<\/h1>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tClick here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Add Your Heading Text Here<\/h1>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tClick here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
<\/div>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\tThis is the heading\t\t\t\t\t<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
<\/div>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\tThis is the heading\t\t\t\t\t<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
<\/div>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\tThis is the heading\t\t\t\t\t<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
<\/div>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\tThis is the heading\t\t\t\t\t<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u539f\u751f JS \u56fe\u50cf\u62d6\u52a8\u5bf9\u6bd4\uff08\u5c45\u4e2d & \u628a\u624b\u540c\u6b65\uff09<\/title>\r\n <style>\r\n :root {\r\n --handle-size: 36px;\r\n --divider-width: 2px;\r\n }\r\n * { box-sizing: border-box; }\r\n body { font-family: system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial, sans-serif; margin: 0; padding: 24px; background: #fafafa; }\r\n\r\n .compare { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 16\/9; width: 100%; max-width: 960px; margin: auto; background: #000; user-select: none; touch-action: none; }\r\n\r\n .compare__img,\r\n .compare__reveal > img {\r\n position: absolute; inset: 0; width: 100%; height: 100%;\r\n object-fit: cover; object-position: center center;\r\n pointer-events: none; -webkit-user-drag: none;\r\n }\r\n\r\n .compare__img { z-index: 1; }\r\n .compare__reveal { position: absolute; inset: 0; z-index: 2; }\r\n\r\n .compare__divider { position: absolute; top: 0; bottom: 0; width: var(--divider-width); background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.25); z-index: 3; }\r\n\r\n .compare__handle { position: absolute; top: 50%; transform: translate(-50%,-50%); z-index: 4; border: none; background: transparent; padding: 0; }\r\n .compare__knob { width: var(--handle-size); height: var(--handle-size); display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 8px 20px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.08); transition: none; }\r\n .compare__arrows { width: 20px; height: 20px; }\r\n\r\n .badge { position: absolute; top: 12px; font-size: 12px; color: #fff; background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 999px; backdrop-filter: blur(4px); z-index: 5; }\r\n .badge--left { left: 12px; }\r\n .badge--right { right: 12px; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"compare\" data-before=\"http:\/\/1666.webi.svipwebs.com\/wp-content\/uploads\/2025\/09\/jhk-1130688313.png\" data-after=\"http:\/\/1666.webi.svipwebs.com\/wp-content\/uploads\/2025\/09\/jhk-1130688313.png\" data-initial=\"50\">\r\n <img class=\"compare__img\" alt=\"\u5bf9\u6bd4\u540e\uff08after\uff09\" \/>\r\n <div class=\"compare__reveal\"><img alt=\"\u5bf9\u6bd4\u524d\uff08before\uff09\" \/><\/div>\r\n <div class=\"compare__divider\" aria-hidden=\"true\"><\/div>\r\n <button type=\"button\" class=\"compare__handle\" role=\"slider\" aria-label=\"\u56fe\u50cf\u5bf9\u6bd4\u6ed1\u6746\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\">\r\n <span class=\"compare__knob\"><svg class=\"compare__arrows\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"\/><line x1=\"3\" y1=\"12\" x2=\"9\" y2=\"12\"\/><polyline points=\"9 6 15 12 9 18\"\/><line x1=\"15\" y1=\"12\" x2=\"21\" y2=\"12\"\/><\/svg><\/span>\r\n <\/button>\r\n <span class=\"badge badge--left\">\u524d\uff08before\uff09<\/span>\r\n <span class=\"badge badge--right\">\u540e\uff08after\uff09<\/span>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n const el = document.querySelector('.compare');\r\n const imgAfter = el.querySelector('.compare__img');\r\n const reveal = el.querySelector('.compare__reveal');\r\n const imgBefore = reveal.querySelector('img');\r\n const divider = el.querySelector('.compare__divider');\r\n const handle = el.querySelector('.compare__handle');\r\n\r\n const beforeSrc = el.getAttribute('data-before');\r\n const afterSrc = el.getAttribute('data-after');\r\n const initialPct = clamp(parseFloat(el.getAttribute('data-initial'))||50);\r\n\r\n imgBefore.src = beforeSrc;\r\n imgAfter.src = afterSrc;\r\n\r\n let pct = initialPct;\r\n let dragging = false;\r\n\r\n function clamp(n,min=0,max=100){ return Math.min(max,Math.max(min,n)); }\r\n function setPct(next) {\r\n pct = clamp(next);\r\n \/\/ \u4f7f\u7528 clip-path \u88c1\u526a\uff08\u56fe\u7247\u4e0d\u7f29\u653e\u4e0d\u504f\u79fb\uff09\r\n const right = 100 - pct;\r\n reveal.style.clipPath = `inset(0% ${right}% 0% 0%)`;\r\n reveal.style.webkitClipPath = `inset(0% ${right}% 0% 0%)`;\r\n \/\/ \u7edf\u4e00\u7528\u50cf\u7d20\u5b9a\u4f4d\u5206\u9694\u7ebf\u4e0e\u628a\u624b\uff0c\u907f\u514d\u4efb\u4f55\u8ddf\u968f\u5ef6\u8fdf\u6216\u767e\u5206\u6bd4\u6362\u7b97\u8bef\u5dee\r\n const leftPx = (el.clientWidth * pct \/ 100);\r\n const dividerWidth = parseFloat(getComputedStyle(divider).width) || 2;\r\n divider.style.left = Math.round(leftPx - dividerWidth \/ 2) + 'px';\r\n handle.style.left = Math.round(leftPx) + 'px';\r\n handle.setAttribute('aria-valuenow', String(Math.round(pct)));\r\n }\r\n\r\n function updateFromClientX(x){ const rect=el.getBoundingClientRect(); setPct(((x-rect.left)\/rect.width)*100); }\r\n setPct(pct);\r\n\r\n el.addEventListener('mousedown', e=>{dragging=true; updateFromClientX(e.clientX);});\r\n el.addEventListener('touchstart', e=>{dragging=true; updateFromClientX(e.touches[0].clientX);},{passive:false});\r\n window.addEventListener('mousemove', e=>{if(dragging) updateFromClientX(e.clientX);});\r\n window.addEventListener('touchmove', e=>{if(dragging) updateFromClientX(e.touches[0].clientX);},{passive:false});\r\n window.addEventListener('mouseup', ()=>dragging=false);\r\n window.addEventListener('touchend', ()=>dragging=false);\r\n window.addEventListener('touchcancel', ()=>dragging=false);\r\n\r\n handle.addEventListener('keydown', e=>{\r\n let next=pct, step=1, big=10;\r\n switch(e.key){\r\n case 'ArrowLeft': next=pct-(e.shiftKey?big:step); break;\r\n case 'ArrowRight': next=pct+(e.shiftKey?big:step); break;\r\n case 'PageDown': next=pct-big; break;\r\n case 'PageUp': next=pct+big; break;\r\n case 'Home': next=0; break;\r\n case 'End': next=100; break;\r\n default: return;\r\n }\r\n e.preventDefault(); setPct(next);\r\n });\r\n\r\n window.addEventListener('resize',()=>setPct(pct));\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Add Your Heading Text Here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Click here Add Your Heading Text Here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Click here This is the heading This […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/1666.webi.svipwebs.com\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1666.webi.svipwebs.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/1666.webi.svipwebs.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/1666.webi.svipwebs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/1666.webi.svipwebs.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":109,"href":"https:\/\/1666.webi.svipwebs.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":471,"href":"https:\/\/1666.webi.svipwebs.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/471"}],"wp:attachment":[{"href":"https:\/\/1666.webi.svipwebs.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}