이번에는 js를 사용한 동적 프로세스 진행 표시줄을 가져오겠습니다. js를 사용하여 동적 프로세스 진행 표시줄을 구현할 때의 주의 사항은 무엇입니까?
1. 디자인 아이디어
다음 단계로 구분됩니다(참고용)
【세로선】
이는 ul 목록 태그를 사용하여 만들어졌으며 언제든지 추가하고 수직으로 정렬할 수 있습니다
【작은 원】
html 태그는 작은 원 태그를 제공하지 않는 것 같습니다. 여기서 p에 라디안 각도를 추가하여 p의 길이(또는 너비)와 동일한 라디안 각도를 추가하면 작은 원이 됩니다. 실현될 수 있습니다. 테이프는 훨씬 더 간단합니다. p
에 텍스트를 직접 추가하기만 하면 됩니다. 【텍스트】
텍스트는 작은 원을 따라야 하며, 작은 원과 동일한 가로 높이를 유지해야 합니다. 여기서 위치: 절대값을 설정하면 동일한 가로 높이의 레이아웃이 완성됩니다. 【동적 효과】
말할 필요도 없이 프런트엔드의 동적 효과는 Javascript로 완성되어야 합니다. 여기서는 주로 두 가지 이벤트, 즉
를 설정해야 합니다.
마우스 이동 이벤트 <a href="http://www.php.cn/wiki/1457.html" target="_blank">onmouseover</a>
<a href="http://www.php.cn/wiki/1457.html" target="_blank">onmouseover</a>=”on_mous_move(‘info_name_1')”
鼠标移出事件onmouseout=”on_mous_out(‘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 p_info = document.getElementsByName(name)[0];
p_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 p_info = document.getElementsByName(name)[0];
p_info.style.backgroundColor = "#45a0f3";
}
</script>
<p class="stepInfo">
<ul>
<li></li>
<li></li>
</ul>
<p class="stepIco stepIco1" name="info_name_1">1</p>
<p class="info info_1" onmouseover="on_mous_move('info_name_1')" onmouseout="on_mous_out('info_name_1')">
<strong name="info_name_1">打开冰箱</strong>
</p>
<p class="stepIco stepIco2" name="info_name_2">2</p>
<p class="info info_2" onmouseover="on_mous_move('info_name_2')" onmouseout="on_mous_out('info_name_2')">
<strong name="info_name_2">把大象放进去</strong>
</p>
<p class="stepIco stepIco3" name="info_name_3">3</p>
<p class="info info_3" onmouseover="on_mous_move('info_name_3')" onmouseout="on_mous_out('info_name_3')">
<strong name="info_name_3">关上冰箱</strong>
</p>
</p>
</body>
</html>이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Angularjs는 이미지 미리보기 및 업로드를 구현합니다.
위 내용은 js는 동적 프로세스 진행 표시줄을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
