日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

jquery實現頁面彈球效果_jquery

作者：EEEchoy ? 更新時間： 2022-03-29 編程語言

本文實例為大家分享了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() ;

原文鏈接：https://blog.csdn.net/weixin_40448659/article/details/81124043

欄目分類
最近更新