這篇文章給大家分享的是有關原生JS如何實現圓環拖拽效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
最近用原生JS寫一個環形的鼠標滑動效果，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0;}
div{width:50px;height:50px;border-radius:50%;position: absolute;
border-width:10px;border-style: solid;}
</style>
</head>
<body>
</body>
<script>
var divList=[];//創建一個空的集合，用來存儲創建的div
for(i=0;i<50;i++){//循環次數50，創造50個div（環形）
var div=document.createElement("div");
var red=Math.round(Math.random()*255);
var green=Math.round(Math.random()*255);
var yellow=Math.round(Math.random()*255);//(產生隨機數作為環形的顏色)
div.style.borderColor="rgb("+red+","+green+","+yellow+")";
document.body.appendChild(div);//在文檔中產生環形
divList[divList.length]=div;//將產生的每一個環形放入空集合
}
document.onmousemove=function(e){//先鼠標按下獲取相對位置
var evt=window.event || e;//IE兼容
var x=evt.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);//鼠標當前x位置
var y=evt.clientY+(document.documentElement.scrollTop||document.body.scrollTop);//鼠標當前y位置
divList[0].style.left=x+"px";//第一個環形的x位置
divList[0].style.top=y+"px";//第一個環形的Y位置
for(i=divList.length-1;i>0;i--){//循環讓每一個環形都在它上一個的位置
divList[i].style.left=divList[i-1].offsetLeft+"px";
divList[i].style.top=divList[i-1].offsetTop+"px";
}
}
</script>
</html>感謝各位的閱讀！關于“原生JS如何實現圓環拖拽效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
