纯js+css实现仿移动端淘宝网站的弹出详情框功能
2020-02-13 10:05
288 查看
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"> <style> body{ width: 100%; height: 100%; margin: 0; padding: 0; } #content{ width: 100%; height: 10rem; border-top-left-radius: 10px; border-top-right-radius: 10px; background: skyblue; position: fixed; left: 0; right: 0; bottom: -10rem; margin: 0 auto; text-align: center; line-height: 10rem; } @keyframes slideUp { from{ bottom: -10rem; } to{ bottom: 0; } } @keyframes slideDown { from{ bottom: 0; } to{ bottom: -10rem; } } #content img{ width: 1.2rem; height: 1.2rem; position: absolute; right: 10px; top: 10px; } </style> </head> <body> <div id="main"> <a href="#" rel="external nofollow" id="a">点击弹出</a> </div> <div id="content"> 测试区域 <img src="images/close.png" alt="" id="close"> </div> </body> <script> var show = document.getElementById("a"); var close = document.getElementById("close"); var content = document.getElementById("content"); var main = document.getElementById("main"); document.onclick = function () { content.style.animation = "slideDown 0.5s 1 normal forwards"; main.style.opacity = "1"; }; close.addEventListener("click",function () { content.style.animation = "slideDown 0.5s 1 normal forwards"; main.style.opacity = "1"; }); show.addEventListener("click",function (e) { stopFunc(e); content.style.animation = "slideUp 0.5s 1 normal forwards"; main.style.opacity = "0.5"; },false); content.addEventListener("click",function (e) { stopFunc(e); },false); //阻止事件向下传递 function stopFunc(e) { e.stopPropagation() ? e.stopPropagation() : e.cancelBubble = true; } </script> </html>
总结
以上所述是小编给大家介绍的纯js+css实现仿移动端淘宝网站的弹出详情框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- 仿移动端淘宝网站的弹出详情框
- Bootstrap的模态框modal插件实现点击协议链接弹出协议详情功能
- 奇幻网站实现点击分类~标签显示文章详情和多级评论功能
- 如何:使用PicturBox实现类似淘宝网站图片的局部放大功能
- Android实现打开手机淘宝并自动识别淘宝口令弹出商品信息功能
- 实现淘宝商品详情页面的viewPager滑动到最后一张图片跳转的功能
- 如何:使用PicturBox实现类似淘宝网站图片的局部放大功能
- Android ViewDragHelper实现京东、淘宝拖拽详情功能的实现
- linux下使用Apache+php实现留言板功能的网站
- Android定时器和倒计时实现淘宝秒杀功能
- 【JAVASCRIPT】JS实现淘宝,百度评分功能
- JS实现提示效果弹出及延迟隐藏的功能
- 我的博客网站开发2——博客首页功能实现之jQuery气泡提示
- asp.net实现网站Rss订阅功能
- javascript+css好多网站用的选星星实现打分功能的函数
- asp.net中弹出确认窗口(confirm),实现删除确认的功能
- Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
- 文章详情页面评论功能添加及实现原理
- Webdriver实现下载功能,屏蔽掉windows弹出的对话框,FireFox下设置浏览器的属性,两种实现方式:
- Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现