我制作了一个简单的幻灯片。它有一个进度条,指示一个简单的5秒计时器(然后移至下一张幻灯片)。条形图上有一个奇怪的黑色部分,该部分显示在铬上。我想知道为什么会这样。
您可以在这里看到运行中的惊人代码...
https://codepen.io/Matiny/pen/pGEXGa
问题的屏幕截图...
https://i.imgur.com/2BsnlA0.png
以下是您所看到的内容的快速摘要...
我在绝对位置上有4条。由于每5秒增加一个类,该函数正在扩展并变得可见。
我知道我可以将scaleX(50)的宽度更改为50%,但这会占用更多的浏览器资源。
显然,我还必须通过Codepen链接显示我的代码,所以我们开始...
HTML
<div class="container">
<div class="row align-items-md-center justify-content-md-start justify-content-center">
<div class="slideshow shadow col-6">
<figure>
<img src="https://queentessence.io/static/img/icons/back-button.svg" alt="left arrow" class="back-arrow">
<img src="https://queentessence.io/static/img/icons/front-button.svg" alt="right arrow" class="front-arrow">
<div class="slide-bg">
<div class="service-image">
<i class="material-icons play-button">play_arrow</i>
<i class="material-icons pause-button play-pause">pause</i>
<img src="https://queentessence.io/static/img/icons/analytics.png" alt="" class="icon-1 slide-animate">
<img src="https://queentessence.io/static/img/icons/security.png" alt="" class="icon-2">
<img src="https://queentessence.io/static/img/icons/dashboard.png" alt="" class="icon-3">
<img src="https://queentessence.io/static/img/icons/customize.png" alt="" class="icon-4">
</div>
</div>
<figcaption>
<h3 class="name text-center">Advanced Analytics</h3>
<div class="all-bars">
<div class="load-bar bar1"></div>
<div class="load-bar bar2"></div>
<div class="load-bar bar3"></div>
<div class="load-bar bar4"></div>
</div>
<p class="description text-center"></p>
<a href="#">
<div class="btn-group-toggle text-center feature-button">
<button class="btn btn-yes bg-light-1">
READ MORE <i class="material-icons">
arrow_forward
</i>
</button>
</div>
</a>
</figcaption>
</figure>
</div>
</div>
</div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Mukta:700');
@mixin positions($number1, $number2) {
position: absolute;
left: $number1;
top: $number2;
transform: translate(-$number1,-$number2);
}
.slideshow {
position: relative;
margin-top: 2.5%;
}
.slideshow figure {
height: 100%;
width: 35vw;
margin: 0 auto;
}
.slideshow figcaption {
width: 100%;
margin: 2.5% auto;
}
.slide-bg {
height: 20vw;
width: 100%;
background-image: url(https://queentessence.io/static/img/slide-bg.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.service-image {
height: 100%;
width: 45%;
margin: 0 auto;
position: relative;
}
.icon-1, .icon-2, .icon-3, .icon-4 {
width: 100%;
position: absolute;
top: 80%;
left: 0;
transform: translate(25%, -80%);
opacity: 0;
transition: all .75s;
}
.slide-animate {
transform: translate(0, -80%);
opacity: 1;
}
.name, .description {
margin: 0 auto
}
.play-button, .pause-button {
opacity: .75;
position: absolute;
@include positions(50%, 5%);
font-size: 2.5vw;
}
.play-pause {
opacity: 0;
}
.name, .h3-style {
width: 100%;
font-family: 'Mukta', 'sans-serif';
font-size: 2vw;
}
.description {
width: 85%;
font-size: 1.25vw;
}
.all-bars {
position: relative;
width: 100%;
height: 2vw;
}
.load-bar {
position: absolute;
left: 50%;
top: 45%;
background-color: aqua;
height: .25vw;
width: 1%;
visibility: hidden;
}
.full-bar {
transition: 5s transform;
transform: scaleX(50);
// width: 50%;
visibility: visible;
}
.feature-button {
margin: 5% 0;
}
.back-arrow {
position: absolute;
top: 50%;
left: 0%;
transform: translate(-50%, -50%);
width: 15%;
cursor: pointer;
}
.front-arrow {
position: absolute;
top: 50%;
right: 0%;
transform: translate(50%, -50%);
width: 15%;
cursor: pointer;
z-index: 10;
}
.box {
height: 12.5vw;
border-radius: 5%;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
a:active, a:focus, a:hover {
text-decoration: none;
}
.analytics {
background-image: url(https://queentessence.io/static/img/icons/analytics.png);
}
.security {
background-image: url(https://queentessence.io/static/img/icons/security.png);
}
.dashboard {
background-image: url(https://queentessence.io/static/img/icons/dashboard.png);
}
.customize {
background-image: url(https://queentessence.io/static/img/icons/customize.png);
}
jQuery
// Controls the slideshow
$(".bar4").addClass("full-bar");
var slider;
var modular = "Drag and drop tiles to customize your dashboard's stats.";
var secure = "Gain the tools to keep your network secure and properly tracked.";
var splash = "Effortlessly update your venue's splash page with our simple page editor.";
var analytics = "Work with a variety of data to better suit your business.";
function slideForward() {
$(".pause-button").addClass("play-pause").siblings("i").removeClass("play-pause");
$(".bar1").hasClass("full-bar") ?
changeSlide(".icon-2", "Modular Dashboard", modular, ".bar2") :
$(".bar2").hasClass("full-bar") ?
changeSlide(".icon-3", "Powerful Splash Page Editor", splash, ".bar3") :
$(".bar3").hasClass("full-bar") ?
changeSlide(".icon-4", "Safe & Secure", secure, ".bar4") :
$(".bar4").hasClass("full-bar") ?
changeSlide(".icon-1", "Advanced Analytics", analytics, ".bar1") :
null;
slider = setTimeout(function() {
slideForward();
}, 5000);
}
function slideBackward() {
$(".play-button").addClass("play-pause").siblings("i").removeClass("play-pause");
$(".bar1").hasClass("full-bar") ?
changeSlide(".icon-4", "Safe & Secure", secure, ".bar4") :
$(".bar4").hasClass("full-bar") ?
changeSlide(".icon-3", "Powerful Splash Page Editor", splash, ".bar3") :
$(".bar3").hasClass("full-bar") ?
changeSlide(".icon-2", "Modular Dashboard", modular, ".bar2") :
$(".bar2").hasClass("full-bar") ?
changeSlide(".icon-1", "Advanced Analytics", analytics, ".bar1") :
null;
}
slideForward();
function changeSlide(icon, title, subtitle, loadbar) {
$(icon).addClass("slide-animate").siblings().removeClass("slide-animate");
$(".name").text(title);
$(".description").text(subtitle);
$(loadbar).addClass("full-bar").siblings(".load-bar").removeClass("full-bar");
}
function slideshow() {
$(".front-arrow").click(function() {
clearTimeout(slider);
slideForward();
})
$(".back-arrow").click(function() {
clearTimeout(slider);
slideBackward();
})
}
slideshow();
答案 0 :(得分:1)
在Chrome中将轮廓设置为透明对我来说很有效
{
xtype: "combobox",
id: "rolesBox",
alias: "widget.rolesbox",
store: Ext.create("MyApp.store.users.Roles"),
listeners: {
afterRender: function (combobox) {
this.select(combobox.store.getData().items[0]);
}
}
}