js小案例

最新推荐文章于 2022-07-30 11:47:24 发布

super晴天

最新推荐文章于 2022-07-30 11:47:24 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签：鼠标 js javascript

本文链接：https://blog.csdn.net/jp571534020/article/details/48310987

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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>

super晴天

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js小案例

1.跟随鼠标的div js跟随鼠标的div body{ height: 2000px; } #div1{ height: 100px; width: 100px; background-color: red; position: absolute; left: 0;
复制链接

扫一扫

专栏目录