JS 와 HTML 결합 실현 프로 세 스 진도 디 스 플레이 항목 사고방식 상세 설명
디자인 아이디어
다음 과 같은 몇 단계 로 나 뉜 다.
[세로 줄]
이것 은 얼 의 list 라벨 로 제작 되 어 수시로 추가 할 수 있 고 세로 로 배열 할 수 있 습 니 다.
[작은 동그라미]
html 라벨 은 작은 동그라미 라벨 을 제공 하지 않 은 것 같 습 니 다.여 기 는 div 에 라디에이터 를 추가 하여 완성 합 니 다.정사각형 div 에 라디에이터 를 추가 하면 div 의 길이(또는 너비)와 같 고 작은 원 을 실현 할 수 있 습 니 다.테 이 프 는 더욱 간단 합 니 다.div 에 텍스트 를 직접 추가 하면 됩 니 다.
【문 자】
문 자 는 작은 동그라미 에 바짝 붙 어 있 고 작은 동그라미 와 같은 수평 높이 를 유지 해 야 합 니 다.여 기 는'position:absolute'를 사용 합 니 다.top 을 설정 하여 같은 수평 높이 의 레이아웃 을 완성 합 니 다.
【동적 효과】
전단 의 동적 효 과 는 물론 자바 script 으로 이 루어 집 니 다.여 기 는 두 가지 이 벤트 를 설정 해 야 합 니 다.즉,
마우스 이동 이벤트
onmouseover=”on_mous_move(‘info_name_1')”마우스 이동 이벤트onmouseout=”on_mous_out(‘info_name_1')”주요 논 리 는 문자 앞 에 넣 는 것 이다.❤앞 뒤 두 개의 빈 칸 과 추가 내용 삭제[주의]
하나의 빈 칸 은 js 에 있어 서 6 글자" "입 니 다.그래서 자 를 때 주의해 야 돼 요.
。。。。이렇게 많아
--------------------------------------------------------------------------------
2.소스 코드 실현
원본 코드 는 다음 과 같 습 니 다.참고 하 시기 바 랍 니 다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> </title>
</head>
<body>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a, img {
border: 0;
}
body {
background: #f2f2f2;
font: 12px/180% Arial, Helvetica, sans-serif, " ";
}
/* stepInfo */
.stepInfo {
position: relative;
background: #f2f2f2;
margin: 80px auto auto 100px;
height: 240px;
}
.stepInfo ul {
/*float: left;*/
height: 100%;
width: 0.6em;
background: #45a0f3;
}
.stepIco {
/* */
border-radius: 1.4em;
padding: 0.2em;
background: #45a0f3;
text-align: center;
line-height: 1.4em;
color: #fff;
position: absolute;
width: 1.4em;
height: 1.4em;
}
.stepIco1 {
left: -0.7em;
top: -1%;
}
.stepIco2 {
left: -0.7em;
top: 50%;
}
.stepIco3 {
left: -0.7em;
top: 95%;
}
.stepText {
color: #666;
margin-top: 0.2em;
width: 4em;
text-align: center;
margin-left: -1.4em;
}
.info {
/* */
position: absolute;
font-size: large;
color: black;
margin: 0 0 0 25px;
width: 200px;
color: #45a0f3;
}
.info_1 {
top: -1%;
}
.info_2 {
top: 50%;
}
.info_3 {
top: 95%;
}
</style>
<script type="text/javascript">
function on_mous_move(name) {
var info = document.getElementsByName(name)[1];
var value = info.innerHTML;
info.innerHTML = " ❤ " + value;
var div_info = document.getElementsByName(name)[0];
div_info.style.backgroundColor = "#47009b";
}
function on_mous_out(name) {
var info = document.getElementsByName(name)[1];
var value = info.innerHTML;
info.innerHTML = value.substr(13, value.length);
var div_info = document.getElementsByName(name)[0];
div_info.style.backgroundColor = "#45a0f3";
}
</script>
<div class="stepInfo">
<ul>
<li></li>
<li></li>
</ul>
<div class="stepIco stepIco1" name="info_name_1">1</div>
<div class="info info_1" onmouseover="on_mous_move('info_name_1')" onmouseout="on_mous_out('info_name_1')">
<strong name="info_name_1"> </strong>
</div>
<div class="stepIco stepIco2" name="info_name_2">2</div>
<div class="info info_2" onmouseover="on_mous_move('info_name_2')" onmouseout="on_mous_out('info_name_2')">
<strong name="info_name_2"> </strong>
</div>
<div class="stepIco stepIco3" name="info_name_3">3</div>
<div class="info info_3" onmouseover="on_mous_move('info_name_3')" onmouseout="on_mous_out('info_name_3')">
<strong name="info_name_3"> </strong>
</div>
</div>
</body>
</html>위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 JS 와 HTML 을 결합 하여 프로 세 스 진행 상황 을 보 여 드 리 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
