纯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实现的仿淘宝网左侧商品分类菜单效果代码,JavaScript技术实现,兼容各主流浏览器.自己再修改一下CSS菜单,它会变得更漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-pro-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <head> <titl

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仿淘宝京东商品放大镜功能

效果图: 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> <style> *{ margin: 0px; padding: 0px; } .imgContent{ width: 420px; height: 300px; pos

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

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

原生js模拟淘宝购物车项目实战

本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项

JS仿淘宝搜索框用户输入事件的实现

淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋",还有闪烁的光标.当用户点击输入的时候,灰色字消失.当用户清空文本框的所有内容的时候,灰色字自动恢复. 接下来,这个小案例就是要介绍如何实现这种效果,即用户输入事件. 判断用户输入的事件有 oninput 和onpropertychange .当然,想必你能想到,由于浏览器兼容的问题,他们出现的场合有所不同. 正常浏览器支持onin

JS仿淘宝实现的简单滑动门效果代码

本文实例讲述了JS仿淘宝实现的简单滑动门效果代码.分享给大家供大家参考.具体如下: 这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多.在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/ 具体代码如下: <!DOCTYPE html PUBL

jQuery实现类似淘宝网图片放大效果的方法

本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="

基于jQuery仿淘宝产品图片放大镜代码分享

这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="