我正在开发一个WP网站,它是从HTML代码迁移而来的。因此,我很难使用WP中的插件。
我搜索并找到了一种仅使用CSS即可拥有“先行”和“后继”功能的方法。它有效,我对此感到高兴。
这是我找到的地方:
http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/
输出:
现在我想稍微调整一下...
好吧..所以现在..如果我将(.image-slider > div
)宽度更改为200px。
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 200px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}
输出:
在下面,您将找到完整的代码和代码段的链接:
/**
* Image slider with pure CSS
* Original version in http://demosthenes.info/blog/css
*/
.image-slider {
position:relative;
display: inline-block;
line-height: 0;
}
/* Could use a pseudo-element, but they’re currently
super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 200px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}
/* Cross-browser resizer styling */
.image-slider > div:before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 40px; height: 40px;
padding: 5px;
background: linear-gradient(-45deg, white 40%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}
.image-slider img {
user-select: none;
max-width: 400px;
}
<div class="image-slider">
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg" />
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg" />
</div>
我需要一些帮助来调整小于200px的BEFORE图片的尺寸。
很抱歉,一个很长的问题。谢谢您的时间:)
我用几个附加内容和媒体查询更新了我的代码
<script type='text/javascript'>
function mouseOver1()
{
document.getElementById('pic1').style.width="700px";
}
</script>
<script type='text/javascript'>
function mouseOverReset1() {
document.getElementById('pic1').style.width="15px";
}
</script>
/**
* Title: Custom Style For Smile Gallery
* Author: Nick D' Curz
* Company: Nick Software Solutions
* URL:http://nicksoftwaresolutions.com;
*/
@media screen and (min-width: 200px)
{
/**
* Image slider with pure CSS
* Original version in http://demosthenes.info/blog/css
*/
.image-slider {
position:relative;
display: inline-block;
line-height: 0;
}
/* Could use a pseudo-element, but they’re currently
super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width:150px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
-webkit-transition: width 1s; /* Safari */
-webkit-transition-timing-function: linear; /* Safari */
transition: width 1s;
transition-timing-function: linear;
}
/* Cross-browser resizer styling */
.image-slider > div:before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 40px; height: 40px;
padding: 5px;
background: linear-gradient(-45deg, white 40%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}
.image-slider img {
user-select: none;
max-width: 300px;
}
/*.image-slider > div:hover{
width:25px;
}*/
}
@media screen and (min-width: 768px)
{
/**
* Image slider with pure CSS
* Original version in http://demosthenes.info/blog/css
*/
.image-slider {
position:relative;
display: inline-block;
line-height: 0;
}
/* Could use a pseudo-element, but they’re currently
super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width:350px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
-webkit-transition: width 1s; /* Safari */
-webkit-transition-timing-function: linear; /* Safari */
transition: width 1s;
transition-timing-function: linear;
}
/* Cross-browser resizer styling */
.image-slider > div:before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 40px; height: 40px;
padding: 5px;
background: linear-gradient(-45deg, white 40%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}
.image-slider img {
user-select: none;
max-width: 700px;
}
/*.image-slider > div:hover{
width:25px;
}*/
}
<link href="http://www.example.com/wp-content/themes/blankslate/css/bootstrap.css" rel="stylesheet"/>
<!-- SMILE GALLERY SLIDER PICTURES STARTS HERE -->
<!-- PICTURE 1 STARTS HERE -->
<div style="text-align: center;">
<div>
<div class="image-slider">
<div id="pic1">
<img src="http://www.example.com/wp-content/uploads/2016/03/o1-b.jpg" />
</div>
<img src="http://www.example.com/wp-content/uploads/2016/03/o1-a.jpg" />
</div>
<span >
<a data-toggle="tooltip" title="Click" class="btn btn-warning pull-left" onclick="mouseOver1()" style="width:70px">Before</a></span>
<span >
<a data-toggle="tooltip" title="Click" class="btn btn-success pull-right" onclick="mouseOverReset1()" style="width:70px">After</a></span>
</div>
<br><br>
</div>
<!-- PICTURE 1 ENDS HERE -->
我发现的唯一解决方案是添加悬停滚动条,以更改div的宽度。
.image-slider > div:hover{ width:10px; }
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句