在无聊的时候写一个有趣的撞壁返回Js程序

最新推荐文章于 2023-09-08 16:38:10 发布

OyxXxx

最新推荐文章于 2023-09-08 16:38:10 发布

阅读量373

点赞数

本文链接：https://blog.csdn.net/ThePemelo/article/details/81451770

版权

先给自己埋个坑写的思路和更多注释等有时间了再补

先贴上代码，效果图~~

滑天下之稽~之滑稽撞壁返回

目前还是自己设定区域，没做到随浏览器大小自动调整范围

感觉重复代码过多，主要还是数组用的不好呢 = =

图片用自己喜欢的就可以了

如果是转载记得注明

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>斜眼笑OyxXxx</title>
    <style type="text/css">  
    	
/*设置盒子大小以及图片大小*/

        #area {																	
            position:relative; 
            width: 1000px; 
            height: 800px; 
            margin: 0px auto; 
            border:5px #000 solid;
        }
        
/*5个斜眼笑的尺寸以及边缘*/

        #smile {
        	width:145px; height:145px; border-radius:50%; overflow:hidden;
            position:absolute;
        }
        #smile2 {
        	width:145px; height:145px; border-radius:50%; overflow:hidden;
            position:absolute;
        }
        #smile3 {
        	width:145px; height:145px; border-radius:50%; overflow:hidden;
            position:absolute;
        }
		#smile4 {
        	width:145px; height:145px; border-radius:50%; overflow:hidden;
            position:absolute;
        }
        #smile5 {
        	width:145px; height:145px; border-radius:50%; overflow:hidden;
            position:absolute;
        }
    </style>
</head>
<body>
	
<!--引入图片-->


    <div id="area">
        <div id="smile"><img src="img/斜眼笑.JPG "></div>
        <div id = "smile2"><img src="img/斜眼笑.jpg"></div>
        <div id = "smile3"><img src="img/斜眼笑.jpg"></div>
        <div id = "smile4"><img src="img/斜眼笑.jpg"></div>
        <div id = "smile5"><img src="img/斜眼笑.jpg"></div>
      
   </div>
   
 <!--JS代码开始！--> 	
    
    <script type="text/javascript">    
 
 /*将smile从CSS带进JavaScript*/
        
        function rebound() {
            var area = document.getElementById("area");
            var smile = document.getElementById("smile");
            var smile2 = document.getElementById("smile2");
            var smile3 = document.getElementById("smile3");
            var smile4 = document.getElementById("smile4");
            var smile5 = document.getElementById("smile5");
            
 /*设置边缘距离   即：总长度 - 图片本身长度
  				总高度 - 图片本身高度*/

            var maxWidth = area.clientWidth - smile.offsetWidth;
            var maxWidth2 = area.clientWidth - smile2.offsetWidth;
            var maxWidth3 = area.clientWidth - smile3.offsetWidth;
            var maxWidth4 = area.clientWidth - smile3.offsetWidth;
            var maxWidth5 = area.clientWidth - smile3.offsetWidth;
            var maxHeight = area.clientHeight - smile.offsetHeight;
            var maxHeight2 = area.clientHeight - smile2.offsetHeight;
            var maxHeight3 = area.clientHeight - smile3.offsetHeight;
            var maxHeight4 = area.clientHeight - smile3.offsetHeight;
            var maxHeight5 = area.clientHeight - smile3.offsetHeight;
 
 /*获取对象相对于由offsetParent属性指定的父坐标距离顶端的距离 */

            var top = smile.offsetTop,
                left = smile.offsetLeft;
            var top2 = smile2.offsetTop,
                left2 = smile2.offsetLeft;
            var top3 = smile3.offsetTop,
                left3 = smile3.offsetLeft;
            var top4 = smile4.offsetTop,
                left4 = smile4.offsetLeft;
            var top5 = smile5.offsetTop,
                left5 = smile5.offsetLeft;
    
/*设置X,Y轴的速度*/

            var speedY = 5,
                speedX = 3;
            var speedY2 = 7,
            	speedX2 = 5;
            var speedY3 = 9,
            	speedX3 = 7;
            var speedY4 = 11,
            	speedX4 = 9;
            var speedY5 = 13,
            	speedX5 = 11;

/*移动函数　判断Ｔｏｐ和Ｌｅｆｔ的值，当其大于最大边界值时，反向,调用Style中Type改变位置
 */
		       function move() {
                top += speedY;
                left += speedX;

                if (top >= maxHeight) {  
                    speedY *= -1;
                }else if (top <= 0) {  
                    speedY *= -1;
                }

                if (left >= maxWidth) {  
                    speedX *= -1;
                }else if (left <= 0) {  
                    speedX *= -1;
                }

                smile.style.left = left +"px";
                smile.style.top = top +"px";
            }
            
             function move2() {
                top2 += speedY2;
                left2 += speedX2;

                if (top2 >= maxHeight2) {  
                    speedY2 *= -1;
                }else if (top2 <= 0) {  
                    speedY2 *= -1;
                }

                if (left2 >= maxWidth2) {  
                    speedX2 *= -1;
                }else if (left2 <= 0) {  
                    speedX2 *= -1;
                }

                smile2.style.left= left2 +"px";
                smile2.style.top = top2 +"px";
            }
             
            function move3() {
                top3 += speedY3;
                left3 += speedX3;

                if (top3 >= maxHeight3) {  
                    speedY3 *= -1;
                }else if (top3 <= 0) {  
                    speedY3 *= -1;
                }

                if (left3 >= maxWidth3) {  
                    speedX3 *= -1;
                }else if (left3 <= 0) {  
                    speedX3 *= -1;
                }

                smile3.style.left = left3 +"px";
                smile3.style.top = top3 +"px";
            }
             function move4() {
                top4 += speedY4;
                left4 += speedX4;

                if (top4 >= maxHeight4) {  
                    speedY4 *= -1;
                }else if (top4 <= 0) {  
                    speedY4 *= -1;
                }

                if (left4 >= maxWidth4) {  
                    speedX4 *= -1;
                }else if (left4 <= 0) {  
                    speedX4 *= -1;
                }

                smile4.style.left = left4 +"px";
                smile4.style.top = top4 +"px";
            }
             
             function move5() {
                top5 += speedY5;
                left5 += speedX5;

                if (top5 >= maxHeight5) {  
                    speedY5 *= -1;
                }else if (top5 <= 0) {  
                    speedY5 *= -1;
                }

                if (left5 >= maxWidth5) {  
                    speedX5 *= -1;
                }else if (left5 <= 0) {  
                    speedX5 *= -1;
                }

                smile5.style.left = left5 +"px";
                smile5.style.top = top5 +"px";
            }

            function autoPlay(){
                setInterval(move, 10);
                setInterval(move2,10);
                setInterval(move3,10); 
                setInterval(move4,10);
                setInterval(move5,10);
                
            }

            autoPlay();
        }
        rebound();
    </script>
</body>
</html>

OyxXxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在无聊的时候写一个有趣的撞壁返回Js程序

先给自己埋个坑写的思路和更多注释等有时间了再补先贴上代码，效果图~~滑天下之稽~之滑稽撞壁返回目前还是自己设定区域，没做到随浏览器大小自动调整范围感觉重复代码过多，主要还是数组用的不好呢 = =图片用自己喜欢的就可以了如果是转载记得注明&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta ch...
复制链接

扫一扫