如何使用jquery實(shí)現(xiàn)頁(yè)面彈球效果

發(fā)布時(shí)間：2022-01-14 16:43:29 來(lái)源：億速云閱讀：152 作者：小新欄目：開(kāi)發(fā)技術(shù)

這篇文章主要為大家展示了“如何使用jquery實(shí)現(xiàn)頁(yè)面彈球效果”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用jquery實(shí)現(xiàn)頁(yè)面彈球效果”這篇文章吧。

具體內(nèi)容如下

像windows屏保一樣，實(shí)現(xiàn)小球在頁(yè)面中的彈跳，并且隨著頁(yè)面的改變而改變

如下圖:

如何使用jquery實(shí)現(xiàn)頁(yè)面彈球效果

源碼

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</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">
 
    
    //調(diào)用移動(dòng)浮窗方法并按順序傳入正確參數(shù)["obj",x,y,l,t,m],obj必填
    /*
       move_w：能夠移動(dòng)的寬度
       move_h：能夠移動(dòng)的高度
       x：左右移動(dòng)速度
       y:上下移動(dòng)速度
       l：初始left的值
       t:初始top的值
       m：時(shí)間
       
    */
    function move_obj(obj, x, y, l, t, m) {
    if (obj == undefined) {
        alert("方法調(diào)用錯(cuò)誤,請(qǐng)傳入正確參數(shù)!");
        return;
    }
    
    //當(dāng)前瀏覽器窗口大小
    move_w = $(window).width() ;
    move_h = $(window).height() ;
 
     
    //若瀏覽器窗口大小改變
    $(window).resize(function() { 
         move_w = $(window).width() ;
         move_h = $(window).height() ;
    });
 
    //移動(dòng)的速度和初始位置
    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;
    
    //移動(dòng)
    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>

以上是“如何使用jquery實(shí)現(xiàn)頁(yè)面彈球效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

如何使用jquery實(shí)現(xiàn)頁(yè)面彈球效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽