如何使用jquery实现页面弹球效果
如何使用jquery实现页面弹球效果
这篇文章主要为大家展示了“如何使用jquery实现页面弹球效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用jquery实现页面弹球效果”这篇文章吧。
具体内容如下
像windows屏保一样，实现小球在页面中的弹跳，并且随着页面的改变而改变
如下图:
源码
<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head><styletype="text/css">*{margin:0px;padding:0px;}#container{width:800px;height:500px;background:#FFF;margin:0pxauto;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><scriptsrc="jquery-3.3.1.js"></script><scripttype="text/javascript">//调用移动浮窗方法并按顺序传入正确参数["obj",x,y,l,t,m],obj必填/*move_w：能够移动的宽度move_h：能够移动的高度x：左右移动速度y:上下移动速度l：初始left的值t:初始top的值m：时间*/functionmove_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;//移动functionmoving(){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});}vartimer_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><bodybgcolor="#FFFFFF"><divid="b1"></div><divid="b2"></div><divid="b3"></div></body></html>
以上是“如何使用jquery实现页面弹球效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！
