scss Matrix特色活动自定义3D旋转木马
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss Matrix特色活动自定义3D旋转木马相关的知识,希望对你有一定的参考价值。
<div id="events">
<div class="events-inner">
{% assign sorted = List.Items %}
{% for Item in sorted limit: 3 -%}
<div class="event-single">
<div class="image"><img src="{{ Item.FieldValues.EventImage }}" /></div>
<div class="text">
<h4>{{ Item.FieldValues.EventTitle }}</h4>
<span class="e-date">{{ Item.FieldValues.EventDate }}</span>
<span class="e-time">{{ Item.FieldValues.EventTime }}</span>
<span class="e-location">{{ Item.FieldValues.EventLocation }}</span>
<p>{{ Item.FieldValues.EventDescription | Truncate: 175 }}</p>
{% if Item.FieldValues.EventLink %}
<a href="{{ Item.FieldValues.EventLink }}" class="cta-btn">More Details</a>
{% else %}
{% endif %}
</div>
</div>
{% endfor -%}
</div>
<div class="controls">
<a id="previous" href="#" onClick="return false;"></a>
<a id="next"href="#" onClick="return false;"></a>
</div>
</div>
$("#events").each(function () {
var prevBtn = $("#previous");
var nextBtn = $("#next");
var firstChild = $(this).find(".event-single:nth-child(1)");
var secondChild = $(this).find(".event-single:nth-child(2)");
var thirdChild = $(this).find(".event-single:nth-child(3)");
firstChild.addClass("top");
secondChild.addClass("middle");
thirdChild.addClass("bottom");
prevBtn.click(function () {
if (firstChild.hasClass("top")) {
firstChild.removeClass("top").addClass("middle");
secondChild.removeClass("middle").addClass("bottom");
thirdChild.removeClass("bottom").addClass("top");
} else if (firstChild.hasClass("middle")) {
firstChild.removeClass("middle").addClass("bottom");
secondChild.removeClass("bottom").addClass("top");
thirdChild.removeClass("top").addClass("middle");
} else {
firstChild.removeClass("bottom").addClass("top");
secondChild.removeClass("top").addClass("middle");
thirdChild.removeClass("middle").addClass("bottom");
}
});
nextBtn.click(function () {
if (firstChild.hasClass("top")) {
firstChild.removeClass("top").addClass("bottom");
secondChild.removeClass("middle").addClass("top");
thirdChild.removeClass("bottom").addClass("middle");
} else if (firstChild.hasClass("middle")) {
firstChild.removeClass("middle").addClass("top");
secondChild.removeClass("bottom").addClass("middle");
thirdChild.removeClass("top").addClass("bottom");
} else {
firstChild.removeClass("bottom").addClass("middle");
secondChild.removeClass("top").addClass("bottom");
thirdChild.removeClass("middle").addClass("top");
}
});
});
#events {
position: relative;
padding: 125px 0;
@media (min-width: 768px) {
padding-bottom: 25px;
}
.events-inner {
width: 75%;
max-width: 1100px;
margin: 0 auto;
position: relative;
height: 500px;
@media (max-width: 767px) {
width: 100%;
height: 550px;
text-align: center;
}
@media (max-width: 600px) {
height: 600px;
}
.event-single {
width: 100%;
max-height: 500px;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
display: flex;
flex-direction: row;
justify-content: space-between;
@media (max-width: 767px) {
flex-direction: column;
}
.image {
text-align: right;
flex-basis: 40%;
@media(max-width: 767px) {
flex-basis: 50%;
max-height: 300px;
top: 0 !important;
left: 50%;
text-align: center;
transform: translateX(-50%);
img {
height: 300px;
}
}
img {
max-height: 100%;
}
}
.text {
flex-basis: 35%;
@media (max-width: 767px) {
flex-basis: 100%
}
h1 {
font-weight: bold;
letter-spacing: 1px;
margin-bottom: 10px;
}
span {
display: block;
color: $bluewash;
}
.e-date {
&:before {
content: "\f073";
font-family: fontawesome;
margin-right: 10px;
text-align: center;
}
}
.e-time {
&:before {
content: "\f017";
font-family: fontawesome;
margin-right: 10px;
text-align: center;
}
}
.e-location {
&:before {
content: "\f041";
font-family: fontawesome;
margin-right: 15px;
text-align: center;
}
}
p {
margin-top: 15px;
}
}
}
}
.controls {
position: relative;
text-align: center;
width: 50vw;
margin: 25px;
@media (max-width: 767px) {
z-index: 9;
position: absolute;
left: 0;
top: 100px;
margin: 0;
width: 100%;
}
>a {
font-size: 25px;
margin: 50px;
color: white;
background: black;
width: 60px;
height: 60px;
position: relative;
transition: all .33s ease;
transform: scale(1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: inline-block;
&#previous {
&:before {
content: "\f0d9";
font-family: fontawesome;
color: white;
font-size: 40px;
line-height: .6;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
&#next {
&:before {
content: "\f0da";
font-family: fontawesome;
color: white;
font-size: 40px;
line-height: .6;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
&#next,
&#previous {
&:hover {
transform: scale(1.1);
}
}
@media(max-width: 767px) {
margin: 0;
height: 300px;
line-height: 300px;
width: 25vw;
opacity: 1;
box-shadow: none;
top: 15px;
&#previous {
left: -15px;
position: absolute;
background: linear-gradient(to right, rgba(0,0,0,.2) , transparent);
}
&#next {
right: -15px;
position: absolute;
background: linear-gradient(to left, rgba(0,0,0,.2) , transparent);
}
}
}
}
}
以上是关于scss Matrix特色活动自定义3D旋转木马的主要内容,如果未能解决你的问题,请参考以下文章
php woocommerce流行品牌旋转木马与光滑和自定义分类循环