纯js+css实现仿移动端淘宝网站的弹出详情框功能


Posted in Javascript onDecember 29, 2019

纯js+css实现仿移动端淘宝网站的弹出详情框功能

点击查看图片

代码

<!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实现仿移动端淘宝网站的弹出详情框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 #Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 #Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 #Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 #Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 #Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 #Javascript
Vue页面刷新记住页面状态的实现
Dec 27 #Javascript
You might like
用PHP实现验证码功能
2006/10/09 PHP
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php单例模式实现方法分析
2015/03/14 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python实现合并两个数组的方法
2015/05/16 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python迭代器常见用法实例分析
2019/11/22 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
公司请假条格式
2014/04/11 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
车间统计员岗位职责
2015/04/14 职场文书
家庭贫困证明
2015/06/16 职场文书
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL