jquery实现页面弹球效果

2024-04-02 19:04:59 379人浏览安东尼

摘要

本文实例为大家分享了Jquery实现页面弹球效果的具体代码，供大家参考，具体内容如下像windows屏保一样，实现小球在页面中的弹跳，并且随着页面的改变而改变如下图: 源码 &

本文实例为大家分享了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必填
    
    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() ;

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jquery实现页面弹球效果

本文链接: https://www.lsjlt.com/news/162528.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

jquery实现页面弹球效果

本文实例为大家分享了jquery实现页面弹球效果的具体代码，供大家参考，具体内容如下像windows屏保一样，实现小球在页面中的弹跳，并且随着页面的改变而改变如下图: 源码 &...

99+

2024-04-02
如何使用jquery实现页面弹球效果

这篇文章主要为大家展示了“如何使用jquery实现页面弹球效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用jquery实现页面弹球效果”这篇文章吧。具体内容如下像windows屏保一样...

99+

2023-06-26
JavaScript/jQuery实现切换页面效果

本文实例为大家分享了JavaScript/jQuery实现切换页面效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="...

99+

2024-04-02
jQuery实现弹弹球小游戏

本文实例为大家分享了jQuery实现弹弹球小游戏的具体代码，供大家参考，具体内容如下效果展示： CSS样式： #box { width: 600px; ...

99+

2024-04-02
JQuery实现页面弹出框

本文实例为大家分享了JQuery实现页面弹出框的具体代码，供大家参考，具体内容如下 bootstrap4里面有个模态框，点击页面中的某个按钮或者元素就会弹出一个框框：今天尝试用...

99+

2024-04-02
jQuery如何实现弹窗下底部页面禁止滑动效果

小编给大家分享一下jQuery如何实现弹窗下底部页面禁止滑动效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！在项目开发过程中，...

99+

2024-04-02
原生js实现弹动小球效果

本文实例为大家分享了JavaScript实现弹动小球效果展示的具体代码，供大家参考，具体内容如下源码展示 <!doctype html> <html> &...

99+

2024-04-02
jQuery如何实现弹幕效果

这篇文章主要为大家展示了“jQuery如何实现弹幕效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何实现弹幕效果”这篇文章吧。效果如下：代码如下...

99+

2024-04-02
jQuery怎么实现弹幕效果

这篇文章将为大家详细讲解有关jQuery怎么实现弹幕效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。先来看看运行效果：下面将整个代码显示出来：<!doctype&...

99+

2024-04-02
jQuery实现弹幕效果案例

本文实例为大家分享了jQuery实现弹幕效果的具体代码，供大家参考，具体内容如下效果： <!DOCTYPE html> <html lang="en">...

99+

2024-04-02
css怎么实现弹跳球动画效果

小编给大家分享一下css怎么实现弹跳球动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！　　1、定义动画关键帧　　对...

99+

2024-04-02
jQuery实现Table分页效果

本文实例为大家分享了jQuery实现Table分页效果的具体代码，供大家参考，具体内容如下 CSS： <style> .pager { fon...

99+

2024-04-02
jquery实现简单的弹窗效果

本文实例为大家分享了jquery实现简单弹窗效果的具体代码，供大家参考，具体内容如下效果实现图 css代码 h1,p,h2{ margin: 0; padding: ...

99+

2024-04-02
怎么用jQuery实现弹弹球小游戏

本篇内容介绍了“怎么用jQuery实现弹弹球小游戏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！本文实例为大家分享了jQuery实现弹弹球小...

99+

2023-06-20
原生js怎么实现弹动小球效果

这篇文章主要介绍了原生js怎么实现弹动小球效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇原生js怎么实现弹动小球效果文章都会有所收获，下面我们一起来看看吧。效果如下源码展示<!doctype ...

99+

2023-06-30
C语言怎么实现弹跳小球效果

本文小编为大家详细介绍“C语言怎么实现弹跳小球效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“C语言怎么实现弹跳小球效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一、项目描述和最终项目展示项目描述: &n...

99+

2023-06-30
jQuery如何实现弹窗遮罩效果

这篇文章给大家分享的是有关jQuery如何实现弹窗遮罩效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果图：图（1）初始图图（2）点击按钮后代码如下：<!DOCTYPE...

99+

2024-04-02
如何使用JavaScript/jQuery实现切换页面效果

小编给大家分享一下如何使用JavaScript/jQuery实现切换页面效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！具体内容如下<!DOCTYPE html><html lang...

99+

2023-06-29
实现jQuery弹窗效果的示例分析

这篇文章主要介绍实现jQuery弹窗效果的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！本文实例为大家分享了jQuery弹窗效果展示的具体代码，供大家参考，具体内容如下<...

99+

2024-04-02
Ajax加载外部页面弹出层效果怎么实现

这篇文章主要介绍“Ajax加载外部页面弹出层效果怎么实现”，在日常操作中，相信很多人在Ajax加载外部页面弹出层效果怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Aj...

99+

2024-04-02