b-arin ทัตพร ตันนารัตน์ (Copy 17359)
✨ CHAWANWIT KUANPHIPATKUL
<!-- เรื่อง dataset ทำให้คลิกแล้ว ตำแหน่งเปลี่ยน โดยใช้ dataset โดนเปลี่ยน position โดยประมาณ แล้วคลิก มน หรือ กลม ทำให้กล่องเป็นแบบมน หรือ กลม --> <!-- <style> body{ height:100vh; background-image:url('https://unblast.com/wp-content/uploads/2018/12/Wood-Pattern-2.jpg'); background-size:cover; perspective:300vmin; margin:0; } div{ background-image:url('https://th.bing.com/th/id/OIP.YrwEluaLxhxr_K49-56fDAAAAA?pid=ImgDet&w=264&h=300&rs=1'); height:200px; width:200px; top:calc(50% - 50px); left:calc(50vh - 50px); position:fixed; border-radius:10px; box-shadow:0px 10px 10px #0005; transition:.3s; } div[data-type="klom"]{ border-radius:100px; } </style> <button onclick="righttop()"> ขวาบน </button> <button onclick="rightlow()"> ขวาล่าง </button> <button onclick="leftlow()"> ซ้ายล่าง </button> <button onclick=""> กลาง </button> <br> <button onclick=""> กลม </button> <button onclick=""> มน </button> <div id="wood" data-type="mon" data-po="1"> </div> <script> function righttop(x){ document.getElementById("wood").style.left="94%" document.getElementById("wood").style.top="10%" } function rightlow(x){ document.getElementById("wood").style.left="90%" document.getElementById("wood").style.top="90%" } function leftlow(x){ document.getElementById("wood").style.left="10%" document.getElementById("wood").style.top="90%" } </script> --> <style> body{ height:100vh; background-image:url('https://unblast.com/wp-content/uploads/2018/12/Wood-Pattern-2.jpg'); background-size:cover; perspective:300vmin; margin:0; } div{ background-image:url('https://th.bing.com/th/id/OIP.YrwEluaLxhxr_K49-56fDAAAAA?pid=ImgDet&w=264&h=300&rs=1'); height:200px; width:200px; top:calc(50% - 50px); left:calc(50vh - 50px); position:fixed; border-radius:10px; box-shadow:0px 10px 10px #0005; transition:.3s; } div[data-type="klom"]{ border-radius:100%; } div[data-type="mon"]{ border-radius:10%; } div[data-po="1"]{ top:0%; left:70%; } div[data-po="3"]{ top:70%; left:70%; } div[data-po="5"]{ top:70%; left:0%; } div[data-po="4"]{ top:calc(50% - 70px); left:calc(50vh - 50px); </style> <div id="wood" data-type="mon" data-po="1"> </div> <button onclick="wood.dataset.po='1'"> ขวาบน </button> <button onclick="wood.dataset.po='3'"> ขวาล่าง </button> <button onclick="wood.dataset.po='5'"> ซ้ายล่าง </button> <button onclick="wood.dataset.po='4'"> กลาง </button> <br> <button onclick="wood.dataset.type='klom'"> กลม </button> <button onclick="wood.dataset.type='mon'"> มน </button>