长治网站设计:如何在Click(用jQuery)上转换属性

2019.07.02 长治网站建设

92

现在让我们开始学习教程,好吗?

你需要开始什么

对于本教程,您真正需要的是Divi。要开始,请访问WordPress仪表板。创建一个新页面,给您的页面一个标题,并在前端部署Divi构建器。选择“从头开始构建”选项。现在你已经准备好出发了!

基本思想

在我们深入了解本教程的细节之前,我想解释一下在Divi上切换转换选项的基本思想。长治网站设计

每次在Divi中自定义元素(节、行或模块)时,都要在幕后向该元素添加自定义CSS。例如,使用divi的内置设置,您可以向blurb模块添加一个Transform旋转属性,以便它沿着Z轴20度旋转模块。

长治网站设计

但是在幕后,您正在创建自定义CSS,它将添加到文本模块中,如下所示:

01
02
03
.et_pb_text_0 {
transform: rotateZ(20deg);
}

很简单。假设您想在悬停时添加相同的转换选项。您所需要做的就是为DiviBuilder设置中的悬停状态应用Transform属性。长治网站设计

长治网站设计

代码在幕后看起来是这样的:

01
02
03
.et_pb_text_0:hover {
transform: rotateZ(20deg);
}

但是,如果您希望在单击时部署Transform属性,则需要进行一些不同的工作。您需要引入一个小jQuery来触发元素(或文本模块)上的单击事件。

使用当前的示例,我们的主要目标基本上是在单击时激活和禁用Transform属性“Transform:rotateZ(20 Deg)”。要做到这一点,一个简单的方法是创建一个自定义CSS类,其属性为“Transform:None!重要”对我们的页面设置(或外部样式表)。看起来会像这样。

01
02
03
.toggle-transform-animation {
transform: none !important;
}

长治网站设计

有了那个CSS。我们可以将CSS类“切换-转换-动画”添加到具有Transform属性的blurb模块元素中。

长治网站设计

这将禁用(覆盖)Transform属性,并防止它最初激活,即使它已经添加了Transform属性样式。

现在,我们需要做的就是在单击元素时切换(添加和删除)自定义CSS类。这样,每当我们单击元素时,类将被删除,Transform属性(与Divi一起添加的属性)将被部署。

下面是一个简单的例子,说明如何做到这一点。首先,将另一个CSS类添加到名为“Transform_Target”的blurb模块中。

长治网站设计

然后导航到Divi>ThemeOptions>Integration,并将以下jQuery脚本添加到博客的头上:

01
02
03
04
05
06
07
<script>
jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});
</script>

长治网站设计

就这样!现在,每当您单击blurb模块时,添加到divi中blurb的Transform属性就会切换。

长治网站设计

现在,让我们从头开始构建更多的真实生活示例,这样您就可以看到这对于您自己的项目是如何派上用场的。

如何通过点击切换属性来显示Divi中的内容

对于这个例子,我们将继续使用上面使用的一个简单的blurb示例。然后,我们将在其后面添加一个额外的模糊信息,这样每当点击顶部的短文时,它就会移动,以显示坐在它后面的空白的额外内容。

创建前后Blurb模块

然后向第1列添加一个blurb模块。

长治网站设计

更新blurb的内容,使其只包含一个标题(取出默认的正文内容),然后添加Blurb图标。

长治网站设计

然后按以下方式更新设计设置:

背景色:#4c5866
图标颜色:#ffffff
文本定位:中心
文本颜色:光
自定义页边距:0 px底部
定制填充物:顶部15%,底部15%,左10%,右10%。

长治网站设计

稍后我们将回到这个模块,但是现在我们需要创建我们的第二个blurb模块,它将作为我们添加内容的“Back”模块。

为此,复制您刚才创建的blurb模块。

长治网站设计

然后取出blurbIcon(和默认图像),并向模块中添加一些正文内容。

长治网站设计

然后按以下方式更新设计设置:

背景颜色:RGBA(76,88,102,0.3)
文字颜色:深色
定制填充物:20%顶部

长治网站设计

前Blurb模块的定位

既然我们的两条信息都被设计好了,我们需要回到我们的前(顶部)blurb模块,并将其放置在后面(底部)的blurb模块之上。要做到这一点,我们将给它一个绝对的位置,一个100%的高度和一个100%的宽度。

首先,打开顶部/前端的blurb模块设置,并更新以下内容:

身高:100%;
宽度:100%;

长治网站设计

然后将以下自定义CSS添加到主元素:

01
02
position: absolute !important;
transition: all .5s;

然后按以下方式更新z索引:

Z指数:4

长治网站设计

绝对位置与100%的高度和宽度以及z指数相结合,将确保blurb模块保持在其后面的blurb模块之上。转换属性实际上是我们将在下一步中按一下部署的转换选项的转换持续时间。而“游标:指针”是改变游标,使元素看起来对用户来说是可点击的。


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP