最后的效果展示：
1.html部分
两个结构，一个是标题，一个是内容
<body> <div id="share"> <div id="share_content">填写的内容</div> <div id="share_title">标题</div> </div> </body>
2.CSS部分
将内容隐藏，只显示标题，当鼠标移动到标题结构时，才会让内容显示
* { margin: 0px; padding: 0px; } #share { margin: 0px; padding: 0px; width: 200px; height: 400px; position: absolute; border: 1px solid #999; top: -350px; } #share_title { width: 100%; height: 50px; line-height: 50px; text-align: center; letter-spacing: 4px; color: #333; border-top: 1px solid #999; cursor: pointer; } #share_content { width: 100%; height: 350px; font-size: 20px; text-align: center; display: flex; align-items: center; justify-content: center; }
3.JS部分
添加动画函数，施加动画效果的对象和参数，循环执行的速率和动画变化的速率。
/** * 功能说明：动画函数 * {Object} obj 施加动画效果的对象 * {Object} json 施加动画效果的参数 * {Object} interval 循环执行的速率 * {Object} sp 动画变化的速率 * {Object} fn 回调函数 */ // 获取div let share = document.getElementById("share"); // 当鼠标移动到内容框时执行动画让内容框向下移动 share.onmouseover = function() { animate(this, { top: 0 }, 10, 0.01); } // 当鼠标离开到内容框时执行动画让内容框向上隐藏 share.onmouseout = function() { animate(this, { top: -350 }, 10, 0.01); } // 设置动画效果 function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); function getStyle(obj, arr) { if (obj.currentStyle) { return obj.currentStyle[arr]; } else { return document.defaultView.getComputedStyle(obj, null)[arr]; } } obj.timer = setInterval(function() { let flag = true; for (let arr in json) { let current = 0; if (arr == "opacity") { current = Math.round(parseFloat(getStyle(obj, arr)) * 100); } else { current = parseInt(getStyle(obj, arr)); } let speed = (json[arr] - current) * sp; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (current != json[arr]) { flag = false; } if (arr == "opacity") { obj.style.filter = "alpha(opacity : '+(current + speed)+' )"; obj.style.opacity = (current + speed) / 100; } else { obj.style[arr] = current + speed + "px"; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, interval); }
4.整体部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> * { margin: 0px; padding: 0px; } #share { margin: 0px; padding: 0px; width: 200px; height: 400px; position: absolute; border: 1px solid #999; top: -350px; } #share_title { width: 100%; height: 50px; line-height: 50px; text-align: center; letter-spacing: 4px; color: #333; border-top: 1px solid #999; cursor: pointer; } #share_content { width: 100%; height: 350px; font-size: 20px; text-align: center; display: flex; align-items: center; justify-content: center; } </style> <body> <div id="share"> <div id="share_content">填写的内容</div> <div id="share_title">标题</div> </div> </body> <script> /** * 功能说明：动画函数 * {Object} obj 施加动画效果的对象 * {Object} json 施加动画效果的参数 * {Object} interval 循环执行的速率 * {Object} sp 动画变化的速率 * {Object} fn 回调函数 */ // 获取div let share = document.getElementById("share"); // 当鼠标移动到内容框时执行动画让内容框向下移动 share.onmouseover = function() { animate(this, { top: 0 }, 10, 0.01); } // 当鼠标离开到内容框时执行动画让内容框向上隐藏 share.onmouseout = function() { animate(this, { top: -350 }, 10, 0.01); } // 设置动画效果 function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); function getStyle(obj, arr) { if (obj.currentStyle) { return obj.currentStyle[arr]; } else { return document.defaultView.getComputedStyle(obj, null)[arr]; } } obj.timer = setInterval(function() { let flag = true; for (let arr in json) { let current = 0; if (arr == "opacity") { current = Math.round(parseFloat(getStyle(obj, arr)) * 100); } else { current = parseInt(getStyle(obj, arr)); } let speed = (json[arr] - current) * sp; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (current != json[arr]) { flag = false; } if (arr == "opacity") { obj.style.filter = "alpha(opacity : '+(current + speed)+' )"; obj.style.opacity = (current + speed) / 100; } else { obj.style[arr] = current + speed + "px"; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, interval); } </script> </html>
