這篇文章主要為大家展示了“如何使用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>以上是“如何使用jquery實現頁面彈球效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
