原生JS實現(xiàn)圓環(huán)拖拽效果
更新時間：2017年04月07日 08:35:17 作者：J_1221
這篇文章主要為大家詳細介紹了原生JS寫一個環(huán)形的鼠標滑動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近用原生JS寫一個環(huán)形的鼠標滑動效果，代碼如下：
<!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=[];//創(chuàng)建一個空的集合，用來存儲創(chuàng)建的div
for(i=0;i<50;i++){//循環(huán)次數(shù)50，創(chuàng)造50個div（環(huán)形）
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);//(產(chǎn)生隨機數(shù)作為環(huán)形的顏色)
div.style.borderColor="rgb("+red+","+green+","+yellow+")";
document.body.appendChild(div);//在文檔中產(chǎn)生環(huán)形
divList[divList.length]=div;//將產(chǎn)生的每一個環(huán)形放入空集合
}
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";//第一個環(huán)形的x位置
divList[0].style.top=y+"px";//第一個環(huán)形的Y位置
for(i=divList.length-1;i>0;i--){//循環(huán)讓每一個環(huán)形都在它上一個的位置
divList[i].style.left=divList[i-1].offsetLeft+"px";
divList[i].style.top=divList[i-1].offsetTop+"px";
}
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS中將多個逗號替換為一個逗號的實現(xiàn)代碼,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了通過javascript實現(xiàn)掃雷游戲代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
js jquery 獲取某一元素到瀏覽器頂端的距離實現(xiàn)方法
今天小編就為大家分享一篇js jquery 獲取某一元素到瀏覽器頂端的距離實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了JS代碼實現(xiàn)根據(jù)時間變換頁面背景效果的相關資料，非常不錯，具有參考借鑒價值，需要的朋友一起看下吧2016-06-06
JS判斷Android、iOS或瀏覽器的多種方法(四種方法)
這篇文章主要介紹了JS判斷Android、iOS或瀏覽器的多種方法(四種方法),需要的朋友可以參考下2017-06-06
js進階語法之變量提升、函數(shù)提升以及參數(shù)的命名沖突問題解決
JavaScript代碼在執(zhí)行前會經(jīng)歷一個預處理階段,這個階段主要涉及變量提升和函數(shù)提升,下面這篇文章主要介紹了js進階語法之變量提升、函數(shù)提升以及參數(shù)的命名沖突問題解決的相關資料,需要的朋友可以參考下2024-09-09
本篇文章主要介紹了js獲取select標簽的值且兼容IE與firefox。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
大體的意思就是想寫一些js,使得網(wǎng)頁上能玩多個游戲。譬如：貪吃蛇、俄羅斯方塊、推箱子、坦克等等。2009-12-12
單元測試框架Jest搭配TypeScript的安裝與配置方式
這篇文章主要介紹了單元測試框架Jest搭配TypeScript的安裝與配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了TypeScript命名空間，TypeScript 是 JavaScript 的一個超集，支持 ECMAScript 6 標準。由微軟開發(fā)的自由和開源的編程語言。設計目標是開發(fā)大型應用，它可以編譯成純 JavaScript,編譯出來的 JavaScript 可以運行在任何瀏覽器上,下面來看詳細內(nèi)容吧2021-12-12