跟隨鼠標的div
跟隨鼠標的div
一個跟隨鼠標的div：css
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟隨鼠標的div</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
</style>
<script>
document.onmousemove=function(ev){
var oEVent=ev||event;
var oDiv=document.getElementById("div1");
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
oDiv.style.top=oEVent.clientY+scrolltop+"px";
oDiv.style.left=oEVent.clientX+scrollLeft+"px";
}
</script>
</head>
<body style="height: 2000px">
<div id="div1">
</div>
</body>
一串跟隨鼠標的div：html
將定位作成絕對定位，後面一個diiv永遠跟着前面一個走。spa
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟隨鼠標的div</title>
<style type="text/css">
div{
width:10px;
height:10px;
background-color:red;
position: absolute;
}
</style>
<script>
var divs=document.getElementsByTagName("div");
document.onmousemove=function(ev){
var oEVent=ev||event;
for(var i=divs.length-1;i>0;i--){
divs[i].style.left= divs[i-1].style.left;
divs[i].style.top= divs[i-1].style.top;
}
divs[0].style.top=oEVent.clientY+"px";
divs[0].style.left=oEVent.clientX+"px";
}
</script>
</head>
<body style="height: 2000px">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
相關文章
- 1. 鼠標移動事件div跟隨鼠標
- 2. canvas鼠標跟隨動畫
- 3. 鼠標跟隨動畫： event
- 4. 鼠標跟隨效果
- 5. 箭頭跟隨鼠標轉
- 6. DragDrop鼠標拖動跟隨
- 7. javascript3跟隨鼠標的提示框
- 8. JavaScript-跟隨鼠標移動的文字
- 9. 精美的鼠標跟隨一
- 10. Unity3D 物體跟隨鼠標旋轉
- 更多相關文章...
- • Web 標準 - 網站建設指南
- • Markdown 標題 - Markdown 教程
- • 漫談MySQL的鎖機制
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 鼠標移動事件div跟隨鼠標
- 2. canvas鼠標跟隨動畫
- 3. 鼠標跟隨動畫： event
- 4. 鼠標跟隨效果
- 5. 箭頭跟隨鼠標轉
- 6. DragDrop鼠標拖動跟隨
- 7. javascript3跟隨鼠標的提示框
- 8. JavaScript-跟隨鼠標移動的文字
- 9. 精美的鼠標跟隨一
- 10. Unity3D 物體跟隨鼠標旋轉