这篇文章主要为大家展示了“如何使用Jquery实现页面弹球效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用jquery实现页面弹球效果”这篇文章吧。具体内容如下像windows屏保一样
这篇文章主要为大家展示了“如何使用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必填 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实现页面弹球效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！
--结束END--
本文标题: 如何使用jquery实现页面弹球效果
本文链接: https://www.lsjlt.com/news/307108.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0