JQuery特効その3---アコーディオン効果
2246 ワード
フロントエンド三大構成
html構築コンテンツ、css美化、js制御インタラクション、jqueryはよく使われるjsライブラリです.
html:
css:
js:
です.
html構築コンテンツ、css美化、js制御インタラクション、jqueryはよく使われるjsライブラリです.
html:
Document
css:
*{
padding: 0px;
margin: 0px;
font-family: cursive;
list-style-type: none;
}
a
{
text-decoration: none;
}
.pic
{
width: 1100px;
height: 600px;
margin-top: 70px;
}
.pic ul li{
float: left;
width: 100px;
height: 429px;
}
.pic1
{
background-image: url("../imgs/01.jpg");
}
.pic2
{
background-image: url("../imgs/02.jpg");
}
.pic ul .pic3
{
background-image: url("../imgs/03.jpg");
width: 789px;
}
.txt
{
background-color: aliceblue;
background: rgba(0,0,0,0.5);
height: 429px;
width: 100px;
}
.txt p{
float: left;
color: white;
}
.txt .p1{
font-size: 12px;
width: 12px;
padding: 25px 25px 0px 20px;
}
.txt .p2{
font-size: 14px;
width: 14px;
padding: 25px 25px 0px 20px;
}js:
$(function(){
$(".pic ul li").mouseover(function(){
$(this).stop(true).animate({width:"789px"},1000).siblings().stop(true).animate({width:"100px"},1000);
});
});です.