jquery 제목 선택 애니메이션
- 韦小宝원래의
- 2017-11-20 11:41:211745검색
jquery제목 선택 애니메이션, 소스 코드가 보너스로 제공됩니다. jquery에 관심이 있다면 이를 연구하고 jquery~~
코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网</title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<style>
/*container容器只是为了水平居中，如不需要可以去掉这层嵌套*/
.container{
left: 50%;
margin-top: 100px;
float: left;
cursor:pointer;
position: relative;
}
.BG{
right: 50%;
font-size: 0;
background-color: #f2f2f2;
border-radius: 30px;
position: relative;
}
.container div{
font-size: 16px;
line-height: 60px;
}
.list{
float: left;
display: inline-block;
padding: 0 50px;
transition: color 0.5s;
position: relative;
z-index: 1;
}
/*这里的listH和listA顺序不能换，有优先级，当listA被使用时listH不起作用*/
.listH{
color: #ff8300;
}
.listA{
color: #fff;
}
/*滑块*/
#active{
width: 100px;
height: 60px;
border-radius: 30px;
background-color: #ff8300;
box-shadow: 0 5px 16px 0 rgba(255, 144, 0, 0.58);
position: relative;
z-index: 0;
transition: left 0.5s,width 1s;
}
</style>
<script>
$(document).ready(function () {
/*设置默认激活的选项卡eq(i)*/
var aL = $(".list:eq(1)");
$("#active").width(aL.innerWidth());
$("#active").offset(aL.offset());
aL.addClass("listA");
/*为每个按钮添加点击事件*/
$(".list").click(function() {
$("#active").width($(this).innerWidth()); //设置宽度
$("#active").offset($(this).offset()); //设置位置
$(this).addClass("listA");
$(".list").not(this).removeClass("listA");
});
/*hover效果*/
$(".list").hover(function () {
$(this).addClass("listH")
},function () {
$(this).removeClass("listH")
})
});
</script>
</head>
<body>
<div>
<div>
<div>PHP中文网首页</div>
<div>PHP中文网视频教程</div>
<div>PHP中文网社区</div>
<div>PHP中文网技术文章</div>
<div>PHP中文网工具下载</div>
<div id="active"></div>
</div>
</div>
</body>
</html>위 내용은 jquery 제목 선택 애니메이션의 소스코드입니다. 더 많은 기술자료와 소스코드를 보시려면 PHP 중국어 홈페이지에 가셔서
검색해 보세요. 관련 권장사항:
jquery가 제스처 잠금 해제 소스 코드를 구현합니다
위 내용은 jquery 제목 선택 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JS 루프 캐러셀 차트다음 기사：JS 루프 캐러셀 차트