原生JS实现圆环拖拽效果


Posted in Javascript onApril 07, 2017

最近用原生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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
高效率JavaScript编写技巧整理
Aug 23 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
深入理解Node module模块
Mar 26 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
vue+Element实现搜索关键字高亮功能
May 28 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
Zepto实现密码的隐藏/显示
Apr 07 #Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 #Javascript
详解JS中遍历语法的比较
Apr 07 #Javascript
JavaScript原生数组Array常用方法
Apr 06 #Javascript
微信小程序 图片宽度自适应的实现
Apr 06 #Javascript
微信小程序 下拉菜单的实现
Apr 06 #Javascript
微信小程序五星评分效果实现代码
Apr 06 #Javascript
You might like
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
用python登录Dr.com思路以及代码分享
2014/06/25 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
什么是.net
2015/08/03 面试题
医生实习工作总结的自我评价
2013/09/27 职场文书
销售心得体会
2014/01/02 职场文书
勤俭节约倡议书
2014/04/14 职场文书
新农村建设标语
2014/06/24 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书