原生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 动态将数字金额转化为中文大写金额
May 14 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
vue 获取及修改store.js里的公共变量实例
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
AM/FM收音机的安装与调试
2021/03/02 无线电
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
PHP面向对象法则
2012/02/23 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
PHP图片加水印实现方法
2016/05/06 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python选课系统开发程序
2016/09/02 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
保安拾金不昧表扬信
2014/01/15 职场文书
党员入党表决心的话
2014/03/11 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
毕业生评语大全
2015/01/04 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Go语言grpc和protobuf
2022/04/13 Golang