纯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实现仿移动端淘宝网站的弹出详情框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
原生JS实现仿淘宝网左侧商品分类菜单效果代码
本文实例讲述了原生JS实现仿淘宝网左侧商品分类菜单效果代码.分享给大家供大家参考.具体如下: 这是一款原生JS实现的仿淘宝网左侧商品分类菜单效果代码,JavaScript技术实现,兼容各主流浏览器.自己再修改一下CSS菜单,它会变得更漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-pro-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <head> <titl
-
原生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模拟淘宝网的多级选择菜单代码,这款菜单是模拟淘宝网的,是很早时候的淘宝网,现在已经没有了,本款菜单可以像级联菜单那样一级一级的选择数据,最后确定出数据. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D
-
纯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="ap
-
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
本文实例讲述了JS+CSS实现可拖拽的漂亮圆角特效弹出层的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
JS+CSS实现仿支付宝菜单选中效果代码
本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码.分享给大家供大家参考.具体如下: 这是一个漂亮的JS+CSS仿支付宝菜单,总体风格和形式与支付宝的菜单没什么两样,细心会发现这是一个CSS爱好者自己手功完成的,自己美化图片,重写CSS代码,为作者给我们奉献这么好的菜单而表示感谢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/ 具体代码如下: <!DOCTYPE html
-
JS+CSS实现仿msn风格选项卡效果代码
本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码.分享给大家供大家参考,具体如下: 这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类.资讯类.文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE.火狐等多种浏览器,整体效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
-
JS+CSS实现仿雅虎另类滑动门切换效果
本文实例讲述了JS+CSS实现仿雅虎另类滑动门切换效果.分享给大家供大家参考.具体如下: 这是仿照雅虎特色服务的一个Tab滑动切换效果,核心是一个CSS滑动门,经过了改进,有点特别,看下效果吧,估计很多朋友会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-yahoo-hdm-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi
-
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法.分享给大家供大家参考.具体如下: 首先来看一下运行效果图: 具体实现代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w
-
JS+CSS实现仿新浪微博搜索框的方法
本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
微信小程序仿淘宝热搜词在搜索框中轮播功能
摘要 逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率.就在小程序中试着实现实现. 效果 体验 实现思路 思路比较简单,主要是两点, 1:input处于热搜提示词上层,用z-index实现 2:热搜词轮播用swiper实现,方向为vertical 3:在input聚焦时获取swiper当前值,设置为placeholder 4:将swiper隐藏 代码 已封装成组件 组件代码: wxs
-
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
本文实例讲述了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件.分享给大家供大家参考.具体如下: 完整实例代码点击此处本站下载. 用法 <input type="button" id="btn_dialog" value="打开浮层"/> <div id="dialog-content" style="display:none;">这是内容</div> <sc
-
JS+CSS实现实用的单击输入框弹出选择框的方法
本文实例讲述了JS+CSS实现实用的单击输入框弹出选择框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999