JavaScript手风琴页面制作

前端之家收集整理的这篇文章主要介绍了JavaScript手风琴页面制作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

啥都不说了,直接上效果

1.Html结构代码

手风琴2

2.css样式代码

gs {

width: 1100px;
height: 429px;

}

.gs {
width: 100px;
height: 429px;
float: left;
}

.gs4 {
width: 789px;
height: 429px;
}

.gs1 {
background: url(../img/img/1.jpg) repeat scroll top left;
}
.gs2 {
background-image: url(../img/img/2.jpg);
}
.gs3 {
background-image: url(../img/img/3.jpg);
}
.gs4 {
background-image: url(../img/img/4.jpg);
}

.txt {
width: 100px;
height: 429px;
/margin: 15px;/
background: rgba(0,0.5);
cursor: pointer;
}

/.txt p {
float: left;
width: 20px;
height: 429px;
color: #fff;
font-size: 20px;
margin: 14px;
}
/

.txt p {
color: #fff;
float: left;
margin: 15px;
}

.txt .p1 {
font-size: 14px;
width: 14px;
}

.txt .p2 {
font-size: 12px;
width: 12px;
}

3.javascript代码

SEOver(function(){ $(this).parent().stop(true).animate({"width":"789px"},500).siblings().stop(true).animate({"width":"100px"},500); }); });

4.主要:

a.字体竖排垂直:字体大小font-size = 包含字体标签宽度width

b.js中stop()方法:stop()表示结束动画有过渡

         stop(true)表示暂停动画,

         stop(true,true)表示立即结束动画,无过渡

c.parent():找到上一级元素

siblings():除了本元素外,其他的。。。

animate():动画效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/39268.html
js手风琴

猜你在找的JavaScript相关文章