practice

　　　　

<html>
<meta charset="utf-8">

<style>
img{box-shadow:4px 4px 8px #aaaaaa;}
ul{overflow:hidden;
margin:0;
padding:0;}
ul li{float:left;
margin:0 10px 0 0;
display:inline-block;
padding:0;}
ul li a{display:inline-block;
margin-bottom:20px;
padding:4px 8px;
color:#ffffff;
text-decoration:none;
border-radius:4px;
background:linear-gradient(180deg,rgb(22,135,237),rgb(20,55,90));}
ul li a:hover,
ul li a.active{background-color:#789abc;}
#画像_1{filter:opacity(100%);
transition-property:filter;
transition-duration:0.6s;
transition-timing-function:ease;}
#画像_1.透明度_90{filter:opacity(90%);}
#画像_1.透明度_80{filter:opacity(80%);}
#画像_1.透明度_70{filter:opacity(70%);}
#画像_1.透明度_60{filter:opacity(60%);}
#画像_1.透明度_50{filter:opacity(50%);}
#画像_1.透明度_40{filter:opacity(40%);}
#画像_1.透明度_30{filter:opacity(30%);}
#画像_1.透明度_20{filter:opacity(20%);}
#画像_1.透明度_10{filter:opacity(10%);}
#画像_1.透明度_0{filter:opacity(0%);}
#画像_2{filter:opacity(100%);
transition-property:filter;
transition-duration:0.6s;
transition-timing-function:ease;}
#画像_2.透明度_90{filter:opacity(90%);}
#画像_2.透明度_80{filter:opacity(80%);}
#画像_2.透明度_70{filter:opacity(70%);}
#画像_2.透明度_60{filter:opacity(60%);}
#画像_2.透明度_50{filter:opacity(50%);}
#画像_2.透明度_40{filter:opacity(40%);}
#画像_2.透明度_30{filter:opacity(30%);}
#画像_2.透明度_20{filter:opacity(20%);}
#画像_2.透明度_10{filter:opacity(10%);}
#画像_2.透明度_0{filter:opacity(0%);}
</style>

<ul id="ぼたん_1"style="font-size:80%;">
<li><a href="#" class="active">オパシティ_100%</a></li>
<li><a href="#">オパシティ_90%</a></li>
<li><a href="#">オパシティ_80%</a></li>
<li><a href="#">オパシティ_70%</a></li>
<li><a href="#">オパシティ_60%</a></li>
<li><a href="#">オパシティ_50%</a></li>
<li><a href="#">オパシティ_40%</a></li>
<li><a href="#">オパシティ_30%</a></li>
<li><a href="#">オパシティ_20%</a></li>
<li><a href="#">オパシティ_10%</a></li>
<li><a href="#">オパシティ_0%</a></li>
</ul>
<p><img id="画像_1"src="black_100.jpg"> <img id="画像_2"src="black_100.jpg"></p>
<br>
<ul id="ぼたん_2"style="font-size:100%;letter-spacing:0.7px;">
<li><a href="#" class="active">Opacity_100%</a></li>
<li><a href="#">Opacity_90%</a></li>
<li><a href="#">Opacity_80%</a></li>
<li><a href="#">Opacity_70%</a></li>
<li><a href="#">Opacity_60%</a></li>
<li><a href="#">Opacity_50%</a></li>
<li><a href="#">Opacity_40%</a></li>
<li><a href="#">Opacity_30%</a></li>
<li><a href="#">Opacity_20%</a></li>
<li><a href="#">Opacity_10%</a></li>
<li><a href="#">Opacity_0%</a></li>
</ul>

<script>
window.addEventListener("DOMContentLoaded",function()
{画像_1=document.getElementById("画像_1");
ぼたん_1=document.getElementById("ぼたん_1");
表示=document.querySelectorAll("#ぼたん_1 li a");
for(とうめい of 表示)
{とうめい.addEventListener("click",(e)=>
{e.preventDefault();
e.target.classList.add("active");
比較=document.querySelectorAll("#ぼたん_1 li a");
for(くりっく of 比較)
{くりっく.classList.remove("active");}
switch(e.target.textContent)
{case"オパシティ_90%":
画像_1.setAttribute("class","透明度_90");
break;
case"オパシティ_80%":
画像_1.setAttribute("class","透明度_80");
break;
case"オパシティ_70%":
画像_1.setAttribute("class","透明度_70");
break;
case"オパシティ_60%":
画像_1.setAttribute("class","透明度_60");
break;
case"オパシティ_50%":
画像_1.setAttribute("class","透明度_50");
break;
case"オパシティ_40%":
画像_1.setAttribute("class","透明度_40");
break;
case"オパシティ_30%":
画像_1.setAttribute("class","透明度_30");
break;
case"オパシティ_20%":
画像_1.setAttribute("class","透明度_20");
break;
case"オパシティ_10%":
画像_1.setAttribute("class","透明度_10");
break;
case"オパシティ_0%":
画像_1.setAttribute("class","透明度_0");
break;
default:
画像_1.removeAttribute("class");
break;}});}});
window.addEventListener("DOMContentLoaded",function()
{画像_2=document.getElementById("画像_2");
ぼたん_2=document.getElementById("ぼたん_2");
表示=document.querySelectorAll("#ぼたん_2 li a");
for(とうめい of 表示)
{とうめい.addEventListener("click",(e)=>
{e.preventDefault();
e.target.classList.add("active");
比較=document.querySelectorAll("#ぼたん_2 li a");
for(くりっく of 比較)
{くりっく.classList.remove("active");}
switch(e.target.textContent)
{case"Opacity_90%":
画像_2.setAttribute("class","透明度_90");
break;
case"Opacity_80%":
画像_2.setAttribute("class","透明度_80");
break;
case"Opacity_70%":
画像_2.setAttribute("class","透明度_70");
break;
case"Opacity_60%":
画像_2.setAttribute("class","透明度_60");
break;
case"Opacity_50%":
画像_2.setAttribute("class","透明度_50");
break;
case"Opacity_40%":
画像_2.setAttribute("class","透明度_40");
break;
case"Opacity_30%":
画像_2.setAttribute("class","透明度_30");
break;
case"Opacity_20%":
画像_2.setAttribute("class","透明度_20");
break;
case"Opacity_10%":
画像_2.setAttribute("class","透明度_10");
break;
case"Opacity_0%":
画像_2.setAttribute("class","透明度_0");
break;
default:
画像_2.removeAttribute("class");
break;}});}});
</script>

</html>