html悬浮球效果
在pc上面可能会有差异，在移动端上面效果会更好
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>悬浮球</title>
<style>
*{
padding: 0;
margin: 0;
}
#id{
width: 50px;
height: 50px;
position: fixed;
left: 0px;top: 300px;
background: darkgrey;
cursor: pointer;
}
#span{
font-size: 18px;
position: absolute;
}
#id2{
width: 50px;
height: 50px;
position: fixed;
right: 0px;top: 200px;
background: red;
cursor: pointer;
}
#span2{
font-size: 18px;
position: absolute;
}
</style>
</head>
<body>
<div id="id">
<img style="width: 35px;height: 35px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAzMiAzMiIgaGVpZ2h0PSIxMDI0IiB3aWR0aD0iMTAyNCI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8zMV8xNDQ3KSI+CjxwYXRoIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF8zMV8xNDQ3KSIgZD0iTTE1Ljk5ODkgMjkuOTk3OEMyNS4zMzMzIDI5Ljk5NzggMjkuOTk3OCAyMy43MzAzIDI5Ljk5NzggMTUuOTk4OUMyOS45OTc4IDguMjY3NTEgMjUuMzMzMyAyIDE1Ljk5ODkgMkM2LjY2NDQzIDIgMiA4LjI2NzUxIDIgMTUuOTk4OUMyIDIzLjczMDMgNi42NjQ0MyAyOS45OTc4IDE1Ljk5ODkgMjkuOTk3OFoiPjwvcGF0aD4KPHBhdGggZmlsbC1vcGFjaXR5PSIwLjYiIGZpbGw9InVybCgjcGFpbnQxX3JhZGlhbF8zMV8xNDQ3KSIgZD0iTTE1Ljk5ODkgMjkuOTk3OEMyNS4zMzMzIDI5Ljk5NzggMjkuOTk3OCAyMy43MzAzIDI5Ljk5NzggMTUuOTk4OUMyOS45OTc4IDguMjY3NTEgMjUuMzMzMyAyIDE1Ljk5ODkgMkM2LjY2NDQzIDIgMiA4LjI2NzUxIDIgMTUuOTk4OUMyIDIzLjczMDMgNi42NjQ0MyAyOS45OTc4IDE1Ljk5ODkgMjkuOTk3OFoiPjwvcGF0aD4KPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0idXJsKCNwYWludDJfbGluZWFyXzMxXzE0NDcpIiBkPSJNMTIgMjZDMTIuMzMzMyAyNS4zMzMzIDEzLjYgMjQgMTYgMjRDMTguNCAyNCAxOS42NjY3IDI1LjMzMzMgMjAgMjYiPjwvcGF0aD4KPGNpcmNsZSBmaWxsPSJ1cmwoI3BhaW50M19yYWRpYWxfMzFfMTQ0NykiIHI9IjUiIGN5PSIxOSIgY3g9IjkiPjwvY2lyY2xlPgo8Y2lyY2xlIGZpbGw9InVybCgjcGFpbnQ0X3JhZGlhbF8zMV8xNDQ3KSIgcj0iNC41IiBjeT0iMTkuNSIgY3g9IjE5LjUiPjwvY2lyY2xlPgo8cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTEwLjUgMjJDMTIuOTg1MyAyMiAxNSAxOS45ODUzIDE1IDE3LjVDMTUgMTUuMDE0NyAxMi45ODUzIDEzIDEwLjUgMTNDOC4wMTQ3MiAxMyA2IDE1LjAxNDcgNiAxNy41QzYgMTkuOTg1MyA4LjAxNDcyIDIyIDEwLjUgMjJaIj48L3BhdGg+CjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMjEuNSAyMkMyMy45ODUzIDIyIDI2IDE5Ljk4NTMgMjYgMTcuNUMyNiAxNS4wMTQ3IDIzLjk4NTMgMTMgMjEuNSAxM0MxOS4wMTQ3IDEzIDE3IDE1LjAxNDcgMTcgMTcuNUMxNyAxOS45ODUzIDE5LjAxNDcgMjIgMjEuNSAyMloiPjwvcGF0aD4KPHBhdGggZmlsbD0idXJsKCNwYWludDVfbGluZWFyXzMxXzE0NDcpIiBkPSJNMTIgMjBDMTMuMTA0NiAyMCAxNCAxOS4xMDQ2IDE0IDE4QzE0IDE2Ljg5NTQgMTMuMTA0NiAxNiAxMiAxNkMxMC44OTU0IDE2IDEwIDE2Ljg5NTQgMTAgMThDMTAgMTkuMTA0NiAxMC44OTU0IDIwIDEyIDIwWiI+PC9wYXRoPgo8cGF0aCBmaWxsPSJ1cmwoI3BhaW50Nl9saW5lYXJfMzFfMTQ0NykiIGQ9Ik0yMCAyMEMyMS4xMDQ2IDIwIDIyIDE5LjEwNDYgMjIgMThDMjIgMTYuODk1NCAyMS4xMDQ2IDE2IDIwIDE2QzE4Ljg5NTQgMTYgMTggMTYuODk1NCAxOCAxOEMxOCAxOS4xMDQ2IDE4Ljg5NTQgMjAgMjAgMjBaIj48L3BhdGg+CjxwYXRoIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0idXJsKCNwYWludDdfbGluZWFyXzMxXzE0NDcpIiBkPSJNMTAuMjUgMTEuMjVDMTAuMjUgMTEuMjUgMTEgMTQuMjUgMTQuMjUgMTQuMjUiPjwvcGF0aD4KPHBhdGggc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSJ1cmwoI3BhaW50OF9saW5lYXJfMzFfMTQ0NykiIGQ9Ik0yMS43NSAxMS4yNUMyMS43NSAxMS4yNSAyMSAxNC4yNSAxNy43NSAxNC4yNSI+PC9wYXRoPgo8cGF0aCBmaWxsPSJ1cmwoI3BhaW50OV9yYWRpYWxfMzFfMTQ0NykiIGQ9Ik04IDZDOCA2IDUuNjA3NzggNS4yNjY2NyA0LjQ1Nzc4IDMuMjI2NjdDNC4xNzc3OCAyLjcxNjY3IDMuODU3NzggMy4yMjY2NyAzLjg1Nzc4IDMuMjI2NjdDMy44NTc3OCAzLjIyNjY3IDEuODQ5OTcgNyAzLjk5OTk3IDExQzQuMjU5OTcgMTEuNjkgNS41MSAxMiA2LjUgMTJDOC4yOSAxMiA5LjYwNzc3IDEwLjQ2NjcgOS42MDc3NyA4LjY4NjY3QzkuNjE3NzcgNy40NjY2NyA5LjA4IDYuMzYgOCA2WiI+PC9wYXRoPgo8cGF0aCBmaWxsPSJ1cmwoI3BhaW50MTBfcmFkaWFsXzMxXzE0NDcpIiBkPSJNMjQuMDA2MSA2QzI0LjAwNjEgNiAyNi4zOTgzIDUuMjY2NjcgMjcuNTQ4MyAzLjIyNjY3QzI3LjgyODMgMi43MTY2NyAyOC4xNDgzIDMuMjI2NjcgMjguMTQ4MyAzLjIyNjY3QzI4LjE0ODMgMy4yMjY2NyAzMC4xNTYxIDcgMjguMDA2MSAxMUMyNy43NDYxIDExLjY5IDI2LjQ5NjEgMTIgMjUuNTA2MSAxMkMyMy43MTYxIDEyIDIyLjM5ODMgMTAuNDY2NyAyMi4zOTgzIDguNjg2NjdDMjIuMzg4MyA3LjQ2NjY3IDIyLjkyNjEgNi4zNiAyNC4wMDYxIDZaIj48L3BhdGg+CjxwYXRoIGZpbGw9InVybCgjcGFpbnQxMV9yYWRpYWxfMzFfMTQ0NykiIGQ9Ik0yNC4wMDYxIDZDMjQuMDA2MSA2IDI2LjM5ODMgNS4yNjY2NyAyNy41NDgzIDMuMjI2NjdDMjcuODI4MyAyLjcxNjY3IDI4LjE0ODMgMy4yMjY2NyAyOC4xNDgzIDMuMjI2NjdDMjguMTQ4MyAzLjIyNjY3IDMwLjE1NjEgNyAyOC4wMDYxIDExQzI3Ljc0NjEgMTEuNjkgMjYuNDk2MSAxMiAyNS41MDYxIDEyQzIzLjcxNjEgMTIgMjIuMzk4MyAxMC40NjY3IDIyLjM5ODMgOC42ODY2N0MyMi4zODgzIDcuNDY2NjcgMjIuOTI2MSA2LjM2IDI0LjAwNjEgNloiPjwvcGF0aD4KPC9nPgo8ZGVmcz4KPHJhZGlhbEdyYWRpZW50IGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjEuNSAxMCkgcm90YXRlKDk0LjU3MzkpIHNjYWxlKDI1LjA3OTkpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcj0iMSIgY3k9IjAiIGN4PSIwIiBpZD0icGFpbnQwX3JhZGlhbF8zMV8xNDQ3Ij4KPHN0b3Agc3RvcC1jb2xvcj0iIzlGNzBCOCI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjODU0M0E4IiBvZmZzZXQ9IjAuNTE0MzAzIj48L3N0b3A+CjxzdG9wIHN0b3AtY29sb3I9IiM5MzQ0QkIiIG9mZnNldD0iMC43MTM2OCI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjNkI0MzhCIiBvZmZzZXQ9IjAuODg4NzYzIj48L3N0b3A+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDE4IDE0KSByb3RhdGUoMTM1KSBzY2FsZSg0NS4yNTQ4KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHI9IjEiIGN5PSIwIiBjeD0iMCIgaWQ9InBhaW50MV9yYWRpYWxfMzFfMTQ0NyI+CjxzdG9wIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIwLjMxNDg1MyI+PC9zdG9wPgo8c3RvcCBvZmZzZXQ9IjEiPjwvc3RvcD4KPC9yYWRpYWxHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB5Mj0iMjUiIHgyPSIxNiIgeTE9IjIzIiB4MT0iMTYiIGlkPSJwYWludDJfbGluZWFyXzMxXzE0NDciPgo8c3RvcCBzdG9wLWNvbG9yPSIjNEYzQzQzIj48L3N0b3A+CjxzdG9wIHN0b3AtY29sb3I9IiM1MTI3NTYiIG9mZnNldD0iMSI+PC9zdG9wPgo8L2xpbmVhckdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgxMi44ODg5IDE1LjExMTEpIHJvdGF0ZSgxMzUpIHNjYWxlKDkuNzQyMzYgNS4wNDIzMikiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiByPSIxIiBjeT0iMCIgY3g9IjAiIGlkPSJwYWludDNfcmFkaWFsXzMxXzE0NDciPgo8c3RvcCBzdG9wLWNvbG9yPSIjMzkyMTA4Ij48L3N0b3A+CjxzdG9wIHN0b3Atb3BhY2l0eT0iMCIgc3RvcC1jb2xvcj0iI0M4NzkyOCIgb2Zmc2V0PSIxIj48L3N0b3A+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDIzIDE2KSByb3RhdGUoMTM1KSBzY2FsZSg4LjEzMTczIDQuNTkwNDkpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcj0iMSIgY3k9IjAiIGN4PSIwIiBpZD0icGFpbnQ0X3JhZGlhbF8zMV8xNDQ3Ij4KPHN0b3Agc3RvcC1jb2xvcj0iIzM5MjEwOCI+PC9zdG9wPgo8c3RvcCBzdG9wLW9wYWNpdHk9IjAiIHN0b3AtY29sb3I9IiNDODc5MjgiIG9mZnNldD0iMSI+PC9zdG9wPgo8L3JhZGlhbEdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHkyPSIyMC4wMzAyIiB4Mj0iMTkuOTI2NSIgeTE9IjE2IiB4MT0iMjAuNjE1NCIgaWQ9InBhaW50NV9saW5lYXJfMzFfMTQ0NyI+CjxzdG9wIHN0b3AtY29sb3I9IiM1NTNCM0UiPjwvc3RvcD4KPHN0b3Agc3RvcC1jb2xvcj0iIzNEMjQzMiIgb2Zmc2V0PSIxIj48L3N0b3A+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeTI9IjIwLjAzMDIiIHgyPSIxOS45MjY1IiB5MT0iMTYiIHgxPSIyMC42MTU0IiBpZD0icGFpbnQ2X2xpbmVhcl8zMV8xNDQ3Ij4KPHN0b3Agc3RvcC1jb2xvcj0iIzU1M0IzRSI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjM0QyNDMyIiBvZmZzZXQ9IjEiPjwvc3RvcD4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB5Mj0iMTIuNSIgeDI9IjExLjUiIHkxPSIxMSIgeDE9IjExLjUiIGlkPSJwYWludDdfbGluZWFyXzMxXzE0NDciPgo8c3RvcCBzdG9wLWNvbG9yPSIjNTI0MDQ5IiBvZmZzZXQ9IjAuMDI5OTA4NCI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjNEEyQzQyIiBvZmZzZXQ9IjEiPjwvc3RvcD4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB5Mj0iMTIuNSIgeDI9IjIwLjUiIHkxPSIxMSIgeDE9IjIwLjUiIGlkPSJwYWludDhfbGluZWFyXzMxXzE0NDciPgo8c3RvcCBzdG9wLWNvbG9yPSIjNTI0MDQ5IiBvZmZzZXQ9IjAuMDI5OTA4NCI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjNEEyQzQyIiBvZmZzZXQ9IjEiPjwvc3RvcD4KPC9saW5lYXJHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIgMS41KSByb3RhdGUoMTY1LjM3OSkgc2NhbGUoMTEuODg0OSAxMS44ODQ5KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHI9IjEiIGN5PSIwIiBjeD0iMCIgaWQ9InBhaW50OV9yYWRpYWxfMzFfMTQ0NyI+CjxzdG9wIHN0b3AtY29sb3I9IiM4NjQ5QUMiIG9mZnNldD0iMC40NzI2MzUiPjwvc3RvcD4KPHN0b3Agc3RvcC1jb2xvcj0iI0FFN0NDNyIgb2Zmc2V0PSIwLjY0NDUxNyI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjOTM1M0IzIiBvZmZzZXQ9IjAuNzU5MTA1Ij48L3N0b3A+CjxzdG9wIHN0b3AtY29sb3I9IiM3MzMyOTUiIG9mZnNldD0iMC45NDU1NTUiPjwvc3RvcD4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUgNSkgcm90YXRlKC04LjM2NTg5KSBzY2FsZSgxNy4xODI4IDE3LjE4MjgpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcj0iMSIgY3k9IjAiIGN4PSIwIiBpZD0icGFpbnQxMF9yYWRpYWxfMzFfMTQ0NyI+CjxzdG9wIHN0b3AtY29sb3I9IiM2MTMxODQiIG9mZnNldD0iMC40NzI2MzUiPjwvc3RvcD4KPHN0b3Agc3RvcC1jb2xvcj0iIzkzNTNCOCIgb2Zmc2V0PSIwLjcyNzE2OCI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjNzkyRjlGIiBvZmZzZXQ9IjAuOTQ1NTU1Ij48L3N0b3A+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDI4IDQuNSkgcm90YXRlKDEwMy4xMzQpIHNjYWxlKDE1LjQwMjkgNS4yODA0NykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiByPSIxIiBjeT0iMCIgY3g9IjAiIGlkPSJwYWludDExX3JhZGlhbF8zMV8xNDQ3Ij4KPHN0b3Agc3RvcC1jb2xvcj0iI0I2NzZENiI+PC9zdG9wPgo8c3RvcCBzdG9wLW9wYWNpdHk9IjAiIHN0b3AtY29sb3I9IiNCNjc2RDYiIG9mZnNldD0iMC4zMDUzOTQiPjwvc3RvcD4KPC9yYWRpYWxHcmFkaWVudD4KPGNsaXBQYXRoIGlkPSJjbGlwMF8zMV8xNDQ3Ij4KPHJlY3QgZmlsbD0id2hpdGUiIGhlaWdodD0iMzIiIHdpZHRoPSIzMiI+PC9yZWN0Pgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPg==">
<span id="span">X</span>
</div>
<div id="id2">
<img style="width: 35px;height: 35px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAzMiAzMiIgaGVpZ2h0PSIxMDI0IiB3aWR0aD0iMTAyNCI+CjxwYXRoIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF8zMV8xNjM2KSIgZD0iTTE1Ljk5ODkgMjkuOTk3OEMyNS4zMzMzIDI5Ljk5NzggMjkuOTk3OCAyMy43MzAzIDI5Ljk5NzggMTUuOTk4OUMyOS45OTc4IDguMjY3NTEgMjUuMzMzMyAyIDE1Ljk5ODkgMkM2LjY2NDQzIDIgMiA4LjI2NzUxIDIgMTUuOTk4OUMyIDIzLjczMDMgNi42NjQ0MyAyOS45OTc4IDE1Ljk5ODkgMjkuOTk3OFoiPjwvcGF0aD4KPHBhdGggZmlsbD0idXJsKCNwYWludDFfcmFkaWFsXzMxXzE2MzYpIiBkPSJNMTUuOTk4OSAyOS45OTc4QzI1LjMzMzMgMjkuOTk3OCAyOS45OTc4IDIzLjczMDMgMjkuOTk3OCAxNS45OTg5QzI5Ljk5NzggOC4yNjc1MSAyNS4zMzMzIDIgMTUuOTk4OSAyQzYuNjY0NDMgMiAyIDguMjY3NTEgMiAxNS45OTg5QzIgMjMuNzMwMyA2LjY2NDQzIDI5Ljk5NzggMTUuOTk4OSAyOS45OTc4WiI+PC9wYXRoPgo8cGF0aCBmaWxsLW9wYWNpdHk9IjAuNiIgZmlsbD0idXJsKCNwYWludDJfcmFkaWFsXzMxXzE2MzYpIiBkPSJNMTUuOTk4OSAyOS45OTc4QzI1LjMzMzMgMjkuOTk3OCAyOS45OTc4IDIzLjczMDMgMjkuOTk3OCAxNS45OTg5QzI5Ljk5NzggOC4yNjc1MSAyNS4zMzMzIDIgMTUuOTk4OSAyQzYuNjY0NDMgMiAyIDguMjY3NTEgMiAxNS45OTg5QzIgMjMuNzMwMyA2LjY2NDQzIDI5Ljk5NzggMTUuOTk4OSAyOS45OTc4WiI+PC9wYXRoPgo8cGF0aCBmaWxsPSJ1cmwoI3BhaW50M19yYWRpYWxfMzFfMTYzNikiIGQ9Ik02LjkyNzIyIDExLjQ0ODVDNS4yMDAyOCAxMi4yMzYyIDQgMTMuOTc3OSA0IDE1Ljk5OTlDNCAxOC43NjE0IDYuMjM4NTggMjAuOTk5OSA5IDIwLjk5OTlDMTEuNzYxNCAyMC45OTk5IDE0IDE4Ljc2MTQgMTQgMTUuOTk5OUMxNCAxNC4xNTI5IDEyLjk5ODQgMTIuNTM5NyAxMS41MDg4IDExLjY3MzlDMTAuOTM3NSAxMS44Njg5IDEwLjI2NzkgMTEuOTk5OSA5LjUgMTEuOTk5OUM4LjQ2MzI3IDExLjk5OTkgNy42MDU2OCAxMS43NjExIDYuOTI3MjIgMTEuNDQ4NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbC1ydWxlPSJldmVub2RkIj48L3BhdGg+CjxjaXJjbGUgZmlsbD0idXJsKCNwYWludDRfcmFkaWFsXzMxXzE2MzYpIiByPSI0LjUiIGN5PSIxNi41IiBjeD0iMTkuNSI+PC9jaXJjbGU+CjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMTMuMTEwNyAxMC44MzQ0QzEyLjM2OTkgMTEuMzgzIDExLjE2NjQgMTIgOS41IDEyQzguNTU3ODQgMTIgNy43NjM2MyAxMS44MDI4IDcuMTE3MzYgMTEuNTMyMkM2LjQyMTc1IDEyLjMyNDQgNiAxMy4zNjI5IDYgMTQuNUM2IDE2Ljk4NTMgOC4wMTQ3MiAxOSAxMC41IDE5QzEyLjk4NTMgMTkgMTUgMTYuOTg1MyAxNSAxNC41QzE1IDEyLjk4ODEgMTQuMjU0MyAxMS42NTAzIDEzLjExMDcgMTAuODM0NFpNMjQuODgyNiAxMS41MzIyQzI0LjIzNjQgMTEuODAyOCAyMy40NDIyIDEyIDIyLjUgMTJDMjAuODMzNiAxMiAxOS42MzAxIDExLjM4MyAxOC44ODkzIDEwLjgzNDRDMTcuNzQ1NyAxMS42NTAzIDE3IDEyLjk4ODEgMTcgMTQuNUMxNyAxNi45ODUzIDE5LjAxNDcgMTkgMjEuNSAxOUMyMy45ODUzIDE5IDI2IDE2Ljk4NTMgMjYgMTQuNUMyNiAxMy4zNjI5IDI1LjU3ODIgMTIuMzI0NCAyNC44ODI2IDExLjUzMjJaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PC9wYXRoPgo8cGF0aCBmaWxsPSJ1cmwoI3BhaW50NV9saW5lYXJfMzFfMTYzNikiIGQ9Ik0xMiAxN0MxMy4xMDQ2IDE3IDE0IDE2LjEwNDYgMTQgMTVDMTQgMTMuODk1NCAxMy4xMDQ2IDEzIDEyIDEzQzEwLjg5NTQgMTMgMTAgMTMuODk1NCAxMCAxNUMxMCAxNi4xMDQ2IDEwLjg5NTQgMTcgMTIgMTdaIj48L3BhdGg+CjxwYXRoIGZpbGw9InVybCgjcGFpbnQ2X2xpbmVhcl8zMV8xNjM2KSIgZD0iTTIwIDE3QzIxLjEwNDYgMTcgMjIgMTYuMTA0NiAyMiAxNUMyMiAxMy44OTU0IDIxLjEwNDYgMTMgMjAgMTNDMTguODk1NCAxMyAxOCAxMy44OTU0IDE4IDE1QzE4IDE2LjEwNDYgMTguODk1NCAxNyAyMCAxN1oiPjwvcGF0aD4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZl8zMV8xNjM2KSI+CjxwYXRoIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2U9IiM0NDc1QkYiIGQ9Ik0xMC4yNSA2QzEwLjI1IDYgOS43NSA5IDYuMjUgOSI+PC9wYXRoPgo8L2c+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIxX2ZfMzFfMTYzNikiPgo8cGF0aCBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlPSIjMTY2Q0RFIiBkPSJNMjEgNS43NUMyMSA1Ljc1IDIxLjUgOC43NSAyNSA4Ljc1Ij48L3BhdGg+CjwvZz4KPHBhdGggc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZT0idXJsKCNwYWludDdfbGluZWFyXzMxXzE2MzYpIiBkPSJNMTAuNSA1LjVDMTAuNSA1LjUgMTAgOC41IDYuNSA4LjUiPjwvcGF0aD4KPHBhdGggc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZT0idXJsKCNwYWludDhfcmFkaWFsXzMxXzE2MzYpIiBkPSJNMTAuNSA1LjVDMTAuNSA1LjUgMTAgOC41IDYuNSA4LjUiPjwvcGF0aD4KPHBhdGggc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZT0idXJsKCNwYWludDlfcmFkaWFsXzMxXzE2MzYpIiBkPSJNMjEuNSA1LjVDMjEuNSA1LjUgMjIgOC41IDI1LjUgOC41Ij48L3BhdGg+CjxwYXRoIGZpbGw9InVybCgjcGFpbnQxMF9yYWRpYWxfMzFfMTYzNikiIGQ9Ik0yMC45MDEzIDI1LjAwNjRDMjEuMDEwNCAyNS41NDc4IDIwLjU1MTYgMjYgMTkuOTk5MyAyNkMxNi45MzAxIDI2IDE0LjcxNjggMjYgMTIuMDAwMiAyNkMxMS40NDggMjYgMTAuOTg5NiAyNS41NDc4IDExLjA5ODcgMjUuMDA2NEMxMS41NTk1IDIyLjcyMSAxMy41Nzg4IDIxIDE2IDIxQzE4LjQyMTIgMjEgMjAuNDQwNSAyMi43MjEgMjAuOTAxMyAyNS4wMDY0WiI+PC9wYXRoPgo8cmVjdCBmaWxsPSJ1cmwoI3BhaW50MTFfcmFkaWFsXzMxXzE2MzYpIiByeD0iMi41IiBoZWlnaHQ9IjkiIHdpZHRoPSI1IiB5PSIxNiIgeD0iMSI+PC9yZWN0Pgo8ZGVmcz4KPGZpbHRlciBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgaGVpZ2h0PSI2LjI1MDEyIiB3aWR0aD0iNy4yNTAxMiIgeT0iNC4zNzQ4OCIgeD0iNC42MjUiIGlkPSJmaWx0ZXIwX2ZfMzFfMTYzNiI+CjxmZUZsb29kIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4IiBmbG9vZC1vcGFjaXR5PSIwIj48L2ZlRmxvb2Q+CjxmZUJsZW5kIHJlc3VsdD0ic2hhcGUiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiBpbj0iU291cmNlR3JhcGhpYyIgbW9kZT0ibm9ybWFsIj48L2ZlQmxlbmQ+CjxmZUdhdXNzaWFuQmx1ciByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMzFfMTYzNiIgc3RkRGV2aWF0aW9uPSIwLjUiPjwvZmVHYXVzc2lhbkJsdXI+CjwvZmlsdGVyPgo8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBoZWlnaHQ9IjYuMjUwMTIiIHdpZHRoPSI3LjI1MDEyIiB5PSI0LjEyNDg4IiB4PSIxOS4zNzQ5IiBpZD0iZmlsdGVyMV9mXzMxXzE2MzYiPgo8ZmVGbG9vZCByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIgZmxvb2Qtb3BhY2l0eT0iMCI+PC9mZUZsb29kPgo8ZmVCbGVuZCByZXN1bHQ9InNoYXBlIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgaW49IlNvdXJjZUdyYXBoaWMiIG1vZGU9Im5vcm1hbCI+PC9mZUJsZW5kPgo8ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzMxXzE2MzYiIHN0ZERldmlhdGlvbj0iMC41Ij48L2ZlR2F1c3NpYW5CbHVyPgo8L2ZpbHRlcj4KPHJhZGlhbEdyYWRpZW50IGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUuNSA5KSByb3RhdGUoMTMyLjgzOSkgc2NhbGUoMzcuNTAzMykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiByPSIxIiBjeT0iMCIgY3g9IjAiIGlkPSJwYWludDBfcmFkaWFsXzMxXzE2MzYiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRkZGNDc4Ij48L3N0b3A+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkIwMkUiIG9mZnNldD0iMC40NzQ4MjciPjwvc3RvcD4KPHN0b3Agc3RvcC1jb2xvcj0iI0Y3MEE4RCIgb2Zmc2V0PSIxIj48L3N0b3A+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDE2IDQ5KSByb3RhdGUoLTkwKSBzY2FsZSg1MSA2NC45OTY4KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHI9IjEiIGN5PSIwIiBjeD0iMCIgaWQ9InBhaW50MV9yYWRpYWxfMzFfMTYzNiI+CjxzdG9wIHN0b3Atb3BhY2l0eT0iMCIgc3RvcC1jb2xvcj0iI0JGQjJERCIgb2Zmc2V0PSIwLjY3MDQ5NSI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjQTRBRUVCIiBvZmZzZXQ9IjAuNzQ3NjQ5Ij48L3N0b3A+CjxzdG9wIHN0b3AtY29sb3I9IiMzNzlFRkYiIG9mZnNldD0iMC44MTE2MzEiPjwvc3RvcD4KPHN0b3Agc3RvcC1jb2xvcj0iIzEzNDVCNyIgb2Zmc2V0PSIwLjk2NDA1OSI+PC9zdG9wPgo8L3JhZGlhbEdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgxOCAxNCkgcm90YXRlKDEzNSkgc2NhbGUoNDEuMDEyMikiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiByPSIxIiBjeT0iMCIgY3g9IjAiIGlkPSJwYWludDJfcmFkaWFsXzMxXzE2MzYiPgo8c3RvcCBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMC4zMTQ4NTMiPjwvc3RvcD4KPHN0b3Agb2Zmc2V0PSIxIj48L3N0b3A+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjg4ODkgMTIuMTExMSkgcm90YXRlKDEzNSkgc2NhbGUoOS43NDIzNiA1LjA0MjMyKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHI9IjEiIGN5PSIwIiBjeD0iMCIgaWQ9InBhaW50M19yYWRpYWxfMzFfMTYzNiI+CjxzdG9wIHN0b3AtY29sb3I9IiMzOTIxMDgiIG9mZnNldD0iMC4zMzA2MjgiPjwvc3RvcD4KPHN0b3Agc3RvcC1vcGFjaXR5PSIwIiBzdG9wLWNvbG9yPSIjQzg3OTI4IiBvZmZzZXQ9IjEiPjwvc3RvcD4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjMgMTMpIHJvdGF0ZSgxMzUpIHNjYWxlKDguMTMxNzMgNC41OTA0OSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiByPSIxIiBjeT0iMCIgY3g9IjAiIGlkPSJwYWludDRfcmFkaWFsXzMxXzE2MzYiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMzkyMTA4IiBvZmZzZXQ9IjAuNDAyMDc2Ij48L3N0b3A+CjxzdG9wIHN0b3Atb3BhY2l0eT0iMCIgc3RvcC1jb2xvcj0iI0M4NzkyOCIgb2Zmc2V0PSIxIj48L3N0b3A+CjwvcmFkaWFsR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeTI9IjE3IiB4Mj0iMjAiIHkxPSIxMyIgeDE9IjIwLjc2OTIiIGlkPSJwYWludDVfbGluZWFyXzMxXzE2MzYiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNTUzQjNFIj48L3N0b3A+CjxzdG9wIHN0b3AtY29sb3I9IiMzRDI0MzIiIG9mZnNldD0iMSI+PC9zdG9wPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHkyPSIxNyIgeDI9IjIwIiB5MT0iMTMiIHgxPSIyMC43NjkyIiBpZD0icGFpbnQ2X2xpbmVhcl8zMV8xNjM2Ij4KPHN0b3Agc3RvcC1jb2xvcj0iIzU1M0IzRSI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjM0QyNDMyIiBvZmZzZXQ9IjEiPjwvc3RvcD4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB5Mj0iNi41IiB4Mj0iOS41IiB5MT0iNSIgeDE9IjkuNSIgaWQ9InBhaW50N19saW5lYXJfMzFfMTYzNiI+CjxzdG9wIHN0b3AtY29sb3I9IiM1MjQwNDkiIG9mZnNldD0iMC4wMjk5MDg0Ij48L3N0b3A+CjxzdG9wIHN0b3AtY29sb3I9IiM0QTJDNDIiIG9mZnNldD0iMSI+PC9zdG9wPgo8L2xpbmVhckdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg3IDUpIHJvdGF0ZSg1NC40NjIzKSBzY2FsZSg0LjMwMTE2KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHI9IjEiIGN5PSIwIiBjeD0iMCIgaWQ9InBhaW50OF9yYWRpYWxfMzFfMTYzNiI+CjxzdG9wIHN0b3AtY29sb3I9IiM0OTMwMzIiIG9mZnNldD0iMC41NDE2NjciPjwvc3RvcD4KPHN0b3Agc3RvcC1jb2xvcj0iIzVFNDQ1QSIgb2Zmc2V0PSIwLjgwNjcyMyI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjNEEyQzQyIiBvZmZzZXQ9IjAuOTU1MzI2Ij48L3N0b3A+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDI1IDUpIHJvdGF0ZSgxMjUuNTM4KSBzY2FsZSg0LjMwMTE2KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHI9IjEiIGN5PSIwIiBjeD0iMCIgaWQ9InBhaW50OV9yYWRpYWxfMzFfMTYzNiI+CjxzdG9wIHN0b3AtY29sb3I9IiNDMkI0QjUiPjwvc3RvcD4KPHN0b3Agc3RvcC1jb2xvcj0iIzQ2MkI0NSIgb2Zmc2V0PSIwLjg4NzQwNSI+PC9zdG9wPgo8c3RvcCBzdG9wLWNvbG9yPSIjNEEyQzQyIiBvZmZzZXQ9IjEiPjwvc3RvcD4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTYgMjcuMTExMSkgcm90YXRlKC05MCkgc2NhbGUoNy42MTExMSAxNS4yMjIyKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHI9IjEiIGN5PSIwIiBjeD0iMCIgaWQ9InBhaW50MTBfcmFkaWFsXzMxXzE2MzYiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRjcwQThEIj48L3N0b3A+CjxzdG9wIHN0b3AtY29sb3I9IiM4OTAyOUMiIG9mZnNldD0iMSI+PC9zdG9wPgo8L3JhZGlhbEdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg1LjE2NjY3IDE2LjQwOTEpIHJvdGF0ZSgxMDQuODgpIHNjYWxlKDkuNzM1NTUgMy42OTY5KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHI9IjEiIGN5PSIwIiBjeD0iMCIgaWQ9InBhaW50MTFfcmFkaWFsXzMxXzE2MzYiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNUM5OEZGIj48L3N0b3A+CjxzdG9wIHN0b3AtY29sb3I9IiMzRDVCRjEiIG9mZnNldD0iMC44MDU5ODIiPjwvc3RvcD4KPHN0b3Agc3RvcC1jb2xvcj0iIzYwNjVDQSIgb2Zmc2V0PSIwLjk2MjIzOCI+PC9zdG9wPgo8L3JhZGlhbEdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPg==">
<span id="span2">X</span>
</div>
<script type="text/javascript">
// 辅助函数：获取元素样式
function getStyle(element, property) {
return window.getComputedStyle(element)[property];
}
// 辅助函数：设置元素样式
function setStyle(element, property, value) {
element.style[property] = value;
}
// 悬浮球移动逻辑函数
function initDraggable(elementId) {
var _x_start, _y_start, _x_move, _y_move, _x_end, _y_end, left_start, top_start;
var element = document.getElementById(elementId);
// 触摸按下
element.addEventListener("touchstart", function(e) {
_x_start = e.touches[0].pageX; // 起始点击位置
_y_start = e.touches[0].pageY; // 起始点击位置
left_start = getStyle(element, "left"); // 元素左边距
top_start = getStyle(element, "top"); // 元素上边距
});
// 触摸移动
element.addEventListener("touchmove", function(e) {
e.preventDefault(); // 取消事件的默认动作
_x_move = e.touches[0].pageX; // 当前屏幕上所有触摸点的集合列表
_y_move = e.touches[0].pageY; // 当前屏幕上所有触摸点的集合列表
// 左边距=当前触摸点-鼠标起始点击位置+起始左边距
setStyle(element, "left", (parseFloat(_x_move) - parseFloat(_x_start) + parseFloat(left_start)) + "px");
// 上边距=当前触摸点-鼠标起始点击位置+起始上边距
setStyle(element, "top", (parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start)) + "px");
});
// 触摸松开
element.addEventListener("touchend", function(e) {
var bodyW = window.innerWidth / 2; // 屏幕宽的一半
var bodyH = window.innerHeight; // 屏幕高
var _x_end = e.changedTouches[0].pageX; // 松开位置
var _y_end = e.changedTouches[0].pageY; // 松开位置
var divH = element.offsetHeight; // 元素高
var divW = element.offsetWidth; // 元素宽
// 当最终位置在屏幕左半部分
if (_x_end < bodyW) {
setStyle(element, "left", "0px");
} else if (_x_end >= bodyW) { // 当最终位置在屏幕右半部分
setStyle(element, "left", (window.innerWidth - parseFloat(divW)) + "px");
}
// 当元素顶部在屏幕外时
if (parseFloat(getStyle(element, "top")) < 0) {
// 置于顶部
setStyle(element, "top", "0px"); // 置于顶部
}
// 当元素底部在屏幕外时
if (bodyH - _y_end < parseFloat(divH) / 2) {
// 置于底部
setStyle(element, "top", (bodyH - parseFloat(divH)) + "px");
}
});
// 鼠标按下
element.addEventListener("mousedown", function(e) {
_x_start = e.pageX; // 起始点击位置
_y_start = e.pageY; // 起始点击位置
left_start = getStyle(element, "left"); // 元素左边距
top_start = getStyle(element, "top"); // 元素上边距
});
// 鼠标移动
element.addEventListener("mousemove", function(e) {
// 只有在鼠标按下时才执行移动
if (_x_start && _y_start) {
_x_move = e.pageX; // 当前鼠标位置
_y_move = e.pageY; // 当前鼠标位置
// 左边距=当前鼠标位置-鼠标起始点击位置+起始左边距
setStyle(element, "left", (parseFloat(_x_move) - parseFloat(_x_start) + parseFloat(left_start)) + "px");
// 上边距=当前鼠标位置-鼠标起始点击位置+起始上边距
setStyle(element, "top", (parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start)) + "px");
}
});
// 鼠标松开
document.addEventListener("mouseup", function(e) {
if (_x_start && _y_start) {
var bodyW = window.innerWidth / 2; // 屏幕宽的一半
var bodyH = window.innerHeight; // 屏幕高
var _x_end = e.pageX; // 松开位置
var _y_end = e.pageY; // 松开位置
var divH = element.offsetHeight; // 元素高
var divW = element.offsetWidth; // 元素宽
// 当最终位置在屏幕左半部分
if (_x_end < bodyW) {
setStyle(element, "left", "0px");
} else if (_x_end >= bodyW) { // 当最终位置在屏幕右半部分
setStyle(element, "left", (window.innerWidth - parseFloat(divW)) + "px");
}
// 当元素顶部在屏幕外时
if (parseFloat(getStyle(element, "top")) < 0) {
// 置于顶部
setStyle(element, "top", "0px"); // 置于顶部
}
// 当元素底部在屏幕外时
if (bodyH - _y_end < parseFloat(divH) / 2) {
// 置于底部
setStyle(element, "top", (bodyH - parseFloat(divH)) + "px");
}
// 重置起始位置
_x_start = null;
_y_start = null;
}
});
}
// 初始化悬浮球1
initDraggable("id");
// 初始化悬浮球2（示例，用于测试复用）
initDraggable("id2");
// 点击事件
document.querySelectorAll("img").forEach(function(img) {
img.addEventListener("click", function() {
console.log('点击');
});
});
// 关闭按钮点击事件
document.getElementById("span").addEventListener("click", function() {
setStyle(document.getElementById("id"), "display", "none");
});
document.getElementById("span2").addEventListener("click", function() {
setStyle(document.getElementById("id2"), "display", "none");
});
</script>
</body>
</html>