原生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
拖拽

javaScript如何生成xmlhttp
生成xmlhttp的方法有很多，在本文為大家介紹下javaScript中是如何實現(xiàn)的
2013-12-12
JS定時檢測任務任務完成后執(zhí)行下一步的解決辦法
這篇文章主要介紹了JS定時檢測任務任務完成后執(zhí)行下一步的解決辦法,需要的朋友可以參考下
2016-12-12
JavaScript使用FileSystemObject對象寫入文本文件內(nèi)容的方法
這篇文章主要介紹了JavaScript使用FileSystemObject對象寫入文本文件內(nèi)容的方法,實例分析了javascript使用ActiveXObject的技巧與常見問題的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
JS實現(xiàn)的4種數(shù)字千位符格式化方法分享
這篇文章主要介紹了JS實現(xiàn)的4種數(shù)字千位符格式化方法分享,本文給出了4種千分位格式化方法并對它們的性能做了比較,需要的朋友可以參考下
2015-03-03
js獲取url中的參數(shù)且參數(shù)為中文時通過js解碼
這篇文章主要介紹了url中傳遞中文參數(shù)的時候通過js解碼,需要的朋友可以參考下
2014-03-03
js 獲取經(jīng)緯度的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 獲取經(jīng)緯度的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
利用JS實現(xiàn)scroll自定義滾動效果詳解
這篇文章主要給大家介紹了關于利用JS如何實現(xiàn)scroll自定義滾動效果的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2017-10-10
JS小功能(列表頁面隔行變色)簡單實現(xiàn)
這篇文章主要介紹了JS列表頁面隔行變色簡單實現(xiàn)，有需要的朋友可以參考一下
2013-11-11
javascript設置金額樣式轉(zhuǎn)換保留兩位小數(shù)示例代碼
本文為大家介紹下javascript設置金額樣式即保留兩位小數(shù)，下面有個不錯的教程，需要的朋友可以了解下
2013-12-12
axios取消請求、配置的操作方法
Axios 是一個基于 Promise 的 HTTP 客戶端,用于瀏覽器和 Node.js,在實際開發(fā)中,有時候需要取消已經(jīng)發(fā)起的請求,同時也需要對請求進行各種配置,以下分別介紹 Axios 取消請求和配置請求的方法,感興趣的朋友一起看看吧
2025-02-02