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

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

时间: 2022-01-14

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,

python3实现弹弹球小游戏

本文实例为大家分享了python3实现弹弹球小游戏的具体代码,供大家参考,具体内容如下 from tkinter import * from tkinter import messagebox import random import time from PIL import Image, ImageTk import sys class Game: def __init__(self): self.tk = Tk() self.times = 0 sw = self.tk.winfo_scre

Python实现的弹球小游戏示例

本文实例讲述了Python实现的弹球小游戏.分享给大家供大家参考,具体如下: 弹球 1. Ball 类 draw负责移动Ball 碰撞检测,反弹,Ball检测Paddle 2.Paddle类 draw负责移动Paddle 碰撞检测,确定能不能继续 监听键盘事件 3.主循环 绘制Ball和Paddle update sleep 代码 from Tkinter import * import random import time class Ball: def __init__(self, canv

JQuery手速测试小游戏实现思路详解

(-1)写在前面 我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路 两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个p向上移动(更改marginTop值),当鼠标离开div上时,第一个p向下移动. (2)知识储备 a. :nth-child #lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素,如果第一个元素是p则匹配成功. #lol :nth-child(1) 相当于#lol *:nt

Python基于Tkinter模块实现的弹球小游戏

本文实例讲述了Python基于Tkinter模块实现的弹球小游戏.分享给大家供大家参考,具体如下: #!usr/bin/python #-*- coding:utf-8 -*- from Tkinter import * import Tkinter import random import time #创建小球的类 class Ball: def __init__(self,canvas,paddle,color): #参数:画布,球拍和颜色 self.canvas = canvas self

python运用pygame库实现双人弹球小游戏

使用python pygame库实现一个双人弹球小游戏,两人分别控制一个左右移动的挡板用来拦截小球,小球会在两板间不停弹跳,拦截失败的一方输掉游戏,规则类似于简化版的乒乓球. 因为是第一次用pygame写python小游戏并且只用了两三个小时,所以有些粗糙,部分方面有些bug,比如板子可以移动出屏幕外,游戏结束后的提示显示不全. 但是关键部分如小球的移动和基本功能等,还算比较完善. 代码如下: 运行环境为python 3.7,需要安装pygame库 import pygame,sys,time,

jQuery实现数字华容道小游戏(实例代码)

<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>数字华容道</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> *{

js实现带积分弹球小游戏

本文实例为大家分享了js实现带积分的弹球小游戏的具体代码,供大家参考,具体内容如下 注:如果小球与底部方块的角碰撞,积分可能有些许bug <style> #box { width: 400px; height: 400px; border: 1px solid #000000; margin: 50px auto; position: relative; } #ball { height: 60px; width: 60px; border-radius: 50%; background-co

Python实现弹球小游戏

本文主要给大家分享一个实战项目,通过python代码写一款我们儿时大多数人玩过的游戏---小弹球游戏.只不过当时,我们是在游戏机上玩,现在我们通过运行代码来玩,看看大家是否有不一样的体验,是否可以重温当年的乐趣呢! 整个游戏实现比较简单,只需在安装python的电脑上即可运行,玩游戏,通过键盘键控制弹球挡板的移动即可.原理不多说,且让我们去看看吧. 1.代码运行后,游戏界面如下所示: 2.游戏过程中,界面如下所示: 3.游戏结束后,界面如下所示: 游戏实现部分源码如下: def main():

基于jquery实现九宫格拼图小游戏

九宫格拼图小游戏是小时候比较常见的小游戏之一.闲着无聊就用js简单写了一个. 游戏的玩法很简单.九宫格中有八个小图片.随机打乱之后,将八张小图片拼接成一个完整的图. html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <style> body{ border: 0; } .out{ width: 606px; height: 606px; margin: 0 aut

pygame库实现移动底座弹球小游戏

本文实例为大家分享了pygame实现移动底座弹球的具体代码,供大家参考,具体内容如下 输出结果: 实现代码: # -*- coding: utf-8 -*- #Py之pygame:有趣好玩--利用pygame库实现一个移动底座弹球的小游戏 import pygame as pg from pygame.locals import * #将pygame所有常量导入,如后面的QUIT from time import sleep import sys #设置基本屏幕参数 pg.init() #初始化