首页jquery仿360悬浮球

jquery仿360悬浮球

时间: 2023-10-10 13:15:11 浏览: 122

以下是一个简单的jQuery实现360悬浮球的示例代码： ```html <!DOCTYPE html> <html> <head> <title>jQuery仿360悬浮球</title> <style type="text/css"> #floatball{ position: fixed; bottom: 100px; right: 30px; width: 60px; height: 60px; background-image: url('floatball.png'); background-repeat: no-repeat; background-size: 60px 60px; cursor: pointer; z-index: 9999; } </style> </head> <body> <div id="floatball"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // 悬浮球点击事件 $("#floatball").click(function(){ alert("点击了悬浮球！"); }); // 鼠标移入移出事件 $("#floatball").hover(function(){ $(this).animate({bottom:'150px'},500); },function(){ $(this).animate({bottom:'100px'},500); }); }); </script> </body> </html> ``` 在HTML中添加一个DIV元素作为悬浮球，并设置其CSS样式。在JavaScript中使用jQuery选择器获取该DIV元素，并添加点击事件和鼠标移入移出事件，通过animate方法实现悬浮球的动画效果。

阅读全文