jquery实现页面弹球效果

本文实例为大家分享了jquery实现页面弹球效果的具体代码，供大家参考，具体内容如下

像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() ;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery实现弹弹球小游戏

    jQuery实现弹弹球小游戏

    本文实例为大家分享了jQuery实现弹弹球小游戏的具体代码,供大家参考,具体内容如下 效果展示: CSS样式: #box { width: 600px; height: 650px; border: 5px solid rgb(245, 164, 96); position: relative; left: 500px; top: 50px; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff),to(rgba(0,

  • jquery实现页面弹球效果

    jquery实现页面弹球效果

    本文实例为大家分享了jquery实现页面弹球效果的具体代码,供大家参考,具体内容如下 像windows屏保一样,实现小球在页面中的弹跳,并且随着页面的改变而改变 如下图: 源码 <!doctype html> <html><head> <meta charset="utf-8"> <title>无标题文档</title> </head>   <style type="text/css&q

  • 使用jQuery实现页面定时弹出广告效果

    使用jQuery实现页面定时弹出广告效果

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show()) 第六步:清除显示广告图片的定时操作 第七步:设置定时操作(隐藏广告图片的函数) 第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide()) 第九步:清除隐藏广告图片的定时操作 <script

  • 通过jquery实现页面的动画效果(实例代码)

    有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动

  • JQuery点击事件回到页面顶部效果的实现代码

    JQuery点击事件回到页面顶部效果的实现代码 //2个div,点击某个时回到顶部 <div style="height:1000px">111111111111111</div> <div id="top" >top</div> <引用JQuery> <script type="text/javascript"> $(function(){ $("#top&quo

  • jQuery实现div浮动层跟随页面滚动效果

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jQuery实现页面顶部显示的进度条效果完整实例

    本文实例讲述了jQuery实现页面顶部显示的进度条效果.分享给大家供大家参考,具体如下: 具体代码如下: <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> </head> <body> <di

  • jQuery实现页面倒计时并刷新效果

    下面一段代码给大家分享基于jquery实现的页面倒计时并刷新效果,代码如下所示: var intDiff = parseInt(600);//倒计时总秒数量 function timer(intDiff){ window.setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(intDiff > 0){ day = Math.floor(intDiff / (60 * 60 * 24)); hour = M

  • jQuery实现的页面弹幕效果【测试可用】

    jQuery实现的页面弹幕效果【测试可用】

    本文实例讲述了jQuery实现的页面弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht

  • ajax jquery实现页面某一个div的刷新效果

    ajax jquery实现页面某一个div的刷新效果

    原始代码是这样的: <div class='control-group'> <label class='control-label' for='inputSelect'>所属单位</label> <div class='controls'> <select id='inputSelect' name="acCpname" onchange="updateAc()"> <c:forEach items=

  • jquery实现页面常用的返回顶部效果

    jquery实现页面常用的返回顶部效果

    本文实例为大家分享了jquery实现返回顶部效果的全部代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> *{ margin: 0; padding:

随机推荐