jquery实现页面弹球

最新推荐文章于 2022-12-13 13:13:24 发布

EEEchoy

最新推荐文章于 2022-12-13 13:13:24 发布

阅读量974

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_40448659/article/details/81124043

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

像windows屏保一样，实现小球在页面中的弹跳，并且随着页面的改变而改变

如下图:

源码

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<style type="text/css">
   *{
	   margin:0px;
	   padding:0px;}
   #container{
	   width:800px;
	   height:500px;
	   background:#FFF;
	   margin:0px auto;
	   margin-top:100px;}
   #b1{
	   width:50px;
	   height:50px;
	   background-color:#FFCCCC;
	   border-radius:100%;
	   position:fixed;
	      }
   #b2{
	   width:80px;
	   height:80px;
	   background-color:#9EC0C9;
	   border-radius:100%;
	   position:fixed;
	      }
    #b3{
       width:60px;
       height:60px;
       background-color:#336633;
       border-radius:100%;
       position:fixed;
          }
</style>

<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    
    //调用移动浮窗方法并按顺序传入正确参数["obj",x,y,l,t,m],obj必填
	/*
	   move_w：能够移动的宽度
	   move_h：能够移动的高度
	   x：左右移动速度
	   y:上下移动速度
	   l：初始left的值
	   t:初始top的值
	   m：时间
	   
	*/
    function move_obj(obj, x, y, l, t, m) {
    if (obj == undefined) {
        alert("方法调用错误,请传入正确参数!");
        return;
    }
	
    //当前浏览器窗口大小
    move_w = $(window).width() ;
    move_h = $(window).height() ;

     
    //若浏览器窗口大小改变
    $(window).resize(function() { 
         move_w = $(window).width() ;
         move_h = $(window).height() ;
    });

    //移动的速度和初始位置
    x = (x == undefined || x == '') ? 3 : x;
    y = (y == undefined || y == '') ? 3 : y;
    l = (l == undefined || l == '') ? 0 : l;
    t = (t == undefined || t == '') ? 0 : t;
    m = (m == undefined || m == '') ? 80 : m;
	
    //移动
    function moving() {

        if( l >= move_w - $(obj).width() || l < 0 ){  //如果碰到浏览器左右壁
            x = -x;
        }

        if(t >= move_h - $(obj).height() || t < 0){  //如果碰到浏览器上下壁
            y = -y;
        }
       
        l += x;
        t += y;

        $(obj).css({  //改变div的位置
            left: l,
            top: t
        });
    }
	
    var timer_move = setInterval(function() {
        moving();
    },
    m);
	
    $(obj).mouseover(function() {
        clearInterval(timer_move);
    });

    $(obj).mouseout(function() {
        timer_move = setInterval(function() {
            moving();
        },
        m);
    });

}

   move_obj("#b1",30,10,300,300,100);
   move_obj("#b2");
   move_obj("#b3",-20,30,600,500,50);

</script>


<body bgcolor="#FFFFFF">

  <div id="b1"></div>
  <div id="b2"></div>
  <div id="b3"></div>


</body>
</html>

总结

1.$(window).resize()

监测窗口是否改变

2. 获取当前浏览器窗口大小
move_w = $(window).width() ;
move_h = $(window).height() ;

EEEchoy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现页面弹球

像windows屏保一样，实现小球在页面中的弹跳，并且随着页面的改变而改变如下图:源码&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;/head&gt;&lt;style
复制链接

扫一扫