模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出。当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位置。若#div1区块未全部露出时,鼠标移出,#div1区块则开始滑入隐藏;若#div1区块未全部滑入隐藏,鼠标移入,则div1区块则开始匀速弹出。
<!DOCTYPE html> <html> <head> <title>JS运动框架案例:类百度分享制作</title> <meta charset="UTF-8"> </head> <style> #div1 { width: 150px; height: 200px; background: green; position: absolute; left: -150px; top: calc(50% - 100px); } #div1 span { width: 20px; height: 60px; line-height: 20px; right: -20px; top: 70px; background: blue; position: absolute; } html, body { margin: 0; padding: 0; } </style> <script> window.onload = function () { // 补充代码 } </script> <body> <div id='div1'> <span>分享到</span> </div> </body> </html>