js小案例

来源：互联网发布：网络励志名言编辑：程序博客网时间：2024/05/01 15:56

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.onload=function(){       var oDiv=document.getElementById("div1");       document.onmousemove=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.onload=function(){      var aDiv=document.getElementsByTagName("div");      document.onmousemove=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.onload=function  () {  var oDiv=document.getElementById("div1");  var disX=0; //鼠标和div左边框距离  var disY=0;  //鼠标和div上边框距离  oDiv.onmousedown=function(ev){  var e=ev || event;  disX=e.clientX-oDiv.offsetLeft;  disY=e.clientY-oDiv.offsetTop;   document.onmousemove=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.onmouseup=function(){  document.onmousemove=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.onload=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.onmouseover=function(){                move(0);//                clearInterval(timer);//                timer=setInterval(function(){//                    if(oDiv.offsetLeft>=0){//                        clearInterval(timer);//                    }else{//                        oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//                    }//                },30)            }            oDiv.onmouseout=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>

0 0