Question

网络上有足够的图像比较脚本之前/之后（即here）但是，我正在研究是否可以使用类似的滑块概念来比较2个HTML？

假设我想向用户呈现某些CSS将如何影响某些元素（即div或表）并使用滑块，以便用户可以使用它与我提供的链接中的工作方式完全相同。

Answer 1

好吧，如果我理解你的问题，你想用HTML内容替换滑块中的图像，对吗？

修改http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/的代码：

HTML

$scope.changeUnits = function(unit) {
        $scope.activeUnit = unit
        console.log(unit);

        // Run filter code here?
        // Update all mm to inches on the view and vice versa
    }

CSS：

<div id="main">
    <div class="styled"><div class="content">

        <!-- your html content goes here -->

    </div></div>
    <div class="original">

        <!-- repeat your html content here -->

    </div>
</div>

因为此代码用于响应滑块（我将#main设置为60％宽度和60％高度），我们必须使用jQuery动态设置内部.content的宽度，使其等于.original div的宽度，以便内容不会中途中断而是从左向右流动，同时我们隐藏其父级的溢出。所以：

body {background:white; font:12px/150% tahoma; width:100%; height:100%; position:relative;}

#main {
    position:relative;
    display: block;
    width:60%;
    height:60%;
}

/* styling the styled html */

#main > div.styled {
    /* these are the important parts */
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 25px; /* you can change this */
    max-width:100%;
    overflow: hidden;
    height:100%;
    resize: horizontal;

    /* the below are the styles you want to preview */
    background:#000;
    color:#fff;
}

#main div.styled > div.content {width:100%;}

/* styling the resize drag thingy */

#main > div.styled::before {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    width: 13px; height: 13px;
    padding: 5px;
    background: linear-gradient(-45deg, white 50%, transparent 0);
    background-clip: content-box;
    cursor: ew-resize;
    -webkit-filter: drop-shadow(0 0 2px black);
    filter: drop-shadow(0 0 2px black);
}

/* original HTML w/out styling div */

#main .original {
    user-select: none;
    width:100%;
    height:100%;
}

jsFiddle：https://jsfiddle.net/73rr7yog/5/

如果你想在.original和.styled上填充，我建议将它们设置为＆＃34;无缝＆＃34;的相同值。图像滑块的效果。

你也可以让滑块垂直滑动，就像在这里的jsFiddle：https://jsfiddle.net/73rr7yog/6/ 如果您只是将$(document).ready(function(){ var styleWidth = $(".original").width(); $(".content").css("width", function(){ return styleWidth; }); });更改为resize:horizontal并为.styled div添加resize:vertical;

我希望这可以帮助你

Answer 2

类似的问题被问及如何禁用所有样式。这是建议的代码：

.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : '\201C' '\201D' '\2018' '\2019';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
}

您可以使用链接

中的代码替换它

实际上我可以看到他们确实实现了你想要的功能：

http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/

之前的HTML / CSS（非图像）比较之前

2 个答案: