1.跟随鼠标的div
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js跟随鼠标的div</title>
<style>
body{
height: 2000px;
}
#div1{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv=document.getElementById("div1");
document.οnmοusemοve=function(ev){
var e=ev || event;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
oDiv.style.left=scrollLeft+e.clientX+'px';
oDiv.style.top=scrollTop+e.clientY+'px';
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
2.简单的鼠标跟随效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js简单的鼠标跟随</title>
<style>
div{
height: 20px;
width: 20px;
background-color: red;
position: absolute;
border-radius: 50%;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var aDiv=document.getElementsByTagName("div");
document.οnmοusemοve=function(ev){
var e=ev || event;
for(var i=aDiv.length-1;i>0;i--){
aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}
aDiv[0].style.left=e.clientX+'px';
aDiv[0].style.top=e.clientY+'px';
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
3.拖不出去的div
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标拖拽div</title>
<style>
#div1{
height: 100px;
width: 100px;
position: absolute;
background-color: red;
cursor: move;
}
</style>
<script>
window.οnlοad=function () {
var oDiv=document.getElementById("div1");
var disX=0; //鼠标和div左边框距离
var disY=0; //鼠标和div上边框距离
oDiv.οnmοusedοwn=function(ev){
var e=ev || event;
disX=e.clientX-oDiv.offsetLeft;
disY=e.clientY-oDiv.offsetTop;
document.οnmοusemοve=function(ev){
var e=ev || event;
var left=e.clientX-disX;
var top=e.clientY-disY;
var clientWidth=document.documentElement.clientWidth || document.body.clientWidth;
var clientHeight=document.documentElement.clientHeight || document.body.clientHeight;
if(left<0){
left=0
}
if(left>clientWidth-oDiv.offsetWidth){
left=clientWidth-oDiv.offsetWidth;
}
if(top<0){
top=0;
}
if(top>clientHeight-oDiv.offsetHeight){
top=clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=left+'px';
oDiv.style.top=top+'px';
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.mouseup=null;
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
4.js分享
<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
height: 200px;
width: 100px;
background-color: red;
position: absolute;
left: -100px;
top: 45%;
}
#span1{
position: absolute;
left: 100px;
top: 45px;
background-color: #ccc;
}
</style>
<script>
window.οnlοad=function(){
var oSpan=document.getElementById("span1");
var oDiv=document.getElementById("div1");
//var iSpeed=10;
var timer=null;
function move(iTarget){
clearInterval(timer);//防止多次点击造成干扰
var iSpeed=0;
timer=setInterval(function() {
if (oDiv.offsetLeft < iTarget) {
iSpeed = 10;
} else {
iSpeed = -10;
}
if (oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
},30);
}
oDiv.οnmοuseοver=function(){
move(0);
// clearInterval(timer);
// timer=setInterval(function(){
// if(oDiv.offsetLeft>=0){
// clearInterval(timer);
// }else{
// oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
// }
// },30)
}
oDiv.οnmοuseοut=function(){
move(-100);
// clearInterval(timer);
// timer=setInterval(function(){
// if(oDiv.offsetLeft<=-100){
// clearInterval(timer);
// }else{
// oDiv.style.left=oDiv.offsetLeft-iSpeed+'px';
// }
// },30)
}
}
</script>
</head>
<body>
<div id="div1">
<span id="span1">分享到</span>
</div>
</body>
</html></span>