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

时间: 2019-12-29

js模拟淘宝网的多级选择菜单实现方法

本文实例讲述了js模拟淘宝网的多级选择菜单实现方法.分享给大家供大家参考.具体如下: 这是一款基于js模拟淘宝网的多级选择菜单代码,这款菜单是模拟淘宝网的,是很早时候的淘宝网,现在已经没有了,本款菜单可以像级联菜单那样一级一级的选择数据,最后确定出数据. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D

原生js仿淘宝网商品放大镜效果

效果图:(实例图片由自己添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿淘宝放大镜特效</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width:350px;height:

原生JS实现仿淘宝网左侧商品分类菜单效果代码

本文实例讲述了原生JS实现仿淘宝网左侧商品分类菜单效果代码.分享给大家供大家参考.具体如下: 这是一款原生JS实现的仿淘宝网左侧商品分类菜单效果代码,JavaScript技术实现,兼容各主流浏览器.自己再修改一下CSS菜单,它会变得更漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-pro-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <head> <titl

JS实现仿Windows7风格的网页右键菜单效果代码

本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS仿Windows7风格的网页右键菜单,可以多级展开的右键菜单,原生JS.可参考性强,学习JavaScript的朋友不可错过.本菜单用户体验极佳,兼容性良好,无jQuery. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win7-style-web-right-menu-codes/ 具体代码如下: <!DOCTYPE htm

CSS仿淘宝首页导航条布局效果

以下是CSS内容部分: /*子鼠*/ body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;} div,img{margin:0; padding:0; border:0;} ul,li{list-style-type: none; margin:0; padding:0; float:left; } #info{ margin-left:auto; margin-right:auto;widt

jQuery仿淘宝网产品品牌隐藏与显示效果

本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果.分享给大家供大家参考.具体如下: 这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌显示与折叠功能,很实用的代码,看了就知道了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-taobao-product-hidden-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】

本文实例讲述了Android编程实现仿美团或淘宝的多级分类菜单效果.分享给大家供大家参考,具体如下: 这里要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量非常多时可以考虑采用两级分类,而诸如美团这种表现方式是一个不错的选择. 首先上效果图:   主要代码: 1. PopupWindow初始化过程: popupWindow = new PopupWindow(this); View view = LayoutInflater.from(this).inflate(R.layout.

JS实现仿新浪黄色经典滑动门效果代码

本文实例讲述了JS实现仿新浪黄色经典滑动门效果代码.分享给大家供大家参考.具体如下: 这是一款仿新浪网的滑动门,黄色经典,操作舒适度确实很舒服,不亏是门户哦,长度和宽度这个就要自己修改啦,布局紧凑合理,本人喜欢的风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-sina-jd-move-style-demo/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans

js实现全国省份城市级联下拉菜单效果代码

本文实例讲述了js实现全国省份城市级联下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个大家都知道的网页小功能,很常见,全国省份与城市级联菜单,采用Select下拉的方式选择数据,不过现在很多都Ajax了,貌似这种老形式已经过时了,不过在兼容性方面,仍然是不落后的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-conv-city-xl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI

JS实现鼠标滑过折叠与展开菜单效果代码

本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效果.本折叠菜单类似QQ可折叠的好友列表一样,不少人喜欢这种菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC

js实现带圆角的两级导航菜单效果代码

本文实例讲述了js实现带圆角的两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快.使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留作收藏使用.真心不错的蓝色导航条代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cicle-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC

js实现简洁大方的二级下拉菜单效果代码

本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效果看上去相当实用,下拉导航菜单也是大家比较常用的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2level-show-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-/