JavaScript 아름 다운 개성 내 비게 이 션 바 근 두 클 라 우 드 효과 구현
실현 효 과 는 아래 그림 과 같다.
실현 원리:
근 두 운 효과 란 무엇 인가:
•이 효 과 는 간단 합 니 다.마우스 가 다른 네 비게 이 션 디 렉 터 리 로 이동 할 때 배경 그림 이 마 우 스 를 따라 현재 디 렉 터 리 로 미 끄 러 집 니 다.
실현 방향:
•마우스 가 지나 갈 때 offsetLeft 를 이용 하여 현재 상자 의 왼쪽 거 리 를 얻 고 이 값 을 애니메이션 의 end 값 에 부여 합 니 다.
•클릭 할 때 현재 offsetLeft 값 을 기억 하고 마우스 가 지나 갈 때 이전에 클릭 한 offsetLeft 값 을 현재 지나 갈 때의 값 으로 줍 니 다.
구현 코드:
다음은 구현 코드 와 상세 한 설명 입 니 다.핵심 은 position 가 absolute 인 span 라벨 을 설정 하고 마우스 이 벤트 를 연결 하여 봉 인 된 animate 애니메이션 으로 span 의'근 두 운'효 과 를 실현 합 니 다.
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background-color: rgba(0, 0, 0, 0.6);
}
.box{
width: 415px;
height: 42px;
margin: 200px auto;
background-color: #fff;
position: relative;
}
ul{
list-style: none;
position: relative;
}
li{
float: left;
width: 83px;
height: 42px;
text-align: center;
font: 500 15px/42px " ";
cursor: pointer;
}
span{
position: absolute;
left: 0;
top: 0;
width: 83px;
height: 42px;
background-image: linear-gradient(to right,#03c03c 50% ,#51ee5d 100%);
}
</style>
</head>
<body>
<div class="box">
<span></span>
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
// li ，span ，
var liArr = document.getElementsByTagName("li");
var liWidth = liArr[0].offsetWidth;
var span = document.getElementsByTagName("span")[0];
//
var cnt = 0;
// for
for(var i=0; i<liArr.length; i++){
// ， index
liArr[i].index = i;
//
liArr[i].onmouseover = function(){
// span li
animate(span, this.index*liWidth);
}
//
liArr[i].onmouseout = function(){
// span
animate(span, cnt*liWidth);
}
//
liArr[i].onclick = function(){
//
cnt = this.index;
animate(span, cnt*liWidth);
}
}
//
function animate(element, target){
//
clearInterval(element.timer);
//
element.timer = setInterval(function(){
//
var step = (target - element.offsetLeft)/10;
//
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//
element.style.left = element.offsetLeft + step + "px";
// console.log(1);
if(Math.abs(target - element.offsetLeft) < Math.abs(step)){
element.style.left = target + "px";
clearInterval(element.timer);
}
}, 20);
}
}
</script>
</body>
</html> 위 에서 말 한 것 은 소 편 이 소개 한 자 바스 크 립 트 가 정교 하고 개성 있 는 네 비게 이 션 바 근 두 운 효 과 를 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
