Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
.c-compare { --h: 9; --m: 1rem 0; --w: 16; --thumb-bgc: red; --thumb-bgc-focus: hsla(0, 70%, 70%, 0.7); --thumb-w: 1rem; margin: var(--m); position: relative; } .c-compare::after { content: ""; display: block; padding-bottom: calc((var(--h) / var(--w)) * 100%); } .c-compare__left, .c-compare__right { height: 100%; object-fit: cover; position: absolute; width: 100%; } .c-compare__left { clip-path: polygon(0% 0%, var(--value) 0%, var(--value) 100%, 0% 100%); } .c-compare__right { clip-path: polygon(100% 0%, var(--value) 0%, var(--value) 100%, 100% 100%); } .c-compare__range { background-color: transparent; box-sizing: border-box; font-family: inherit; height: 100%; margin: 0; outline: none; position: absolute; top: 0; width: 100%; } .c-compare__range::-moz-range-thumb { background-color: var(--thumb-bgc); cursor: ew-resize; height: 100%; width: var(--thumb-w); } .c-compare__range::-webkit-slider-thumb { background-color: var(--thumb-bgc); cursor: ew-resize; height: 100%; width: var(--thumb-w); } .c-compare__range:focus::-webkit-slider-thumb { background-color: var(--thumb-bgc-focus); box-shadow: 0 0 0 3px var(--thumb-bgc); } .c-compare__range:focus::-moz-range-thumb { background-color: var(--thumb-bgc-focus); box-shadow: 0 0 0 3px var(--thumb-bgc); } .c-compare__range::-moz-range-track { background: transparent; background-size: 100%; box-sizing: border-box; } .c-compare__range::-webkit-slider-runnable-track { background: transparent; background-size: 100%; box-sizing: border-box; height: 100%; } .c-compare__range, .c-compare__range::-webkit-slider-runnable-track, .c-compare__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; } /* For demo */ body { font-family: ui-sansserif, system-ui, sans-serif; color: silver; margin: 0 auto; padding: 1rem; max-width: 1000px;background-color: #1F1F1F; }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js拖拽图像比较-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号