87,910
社区成员
发帖
与我相关
我的任务
分享移动端前端显示购物车明细的功能
无意中看到某个微信号的一个功能，点击购物车时底部弹出一个弹层， 弹层显示购物车的明细，随便点击别的地方，弹出缩回去。
想要学习一下，不知道有没有哪位大神有做个类似的效果，有没有代码指点一下。十分感激。
想要学习一下，不知道有没有哪位大神有做个类似的效果，有没有代码指点一下。十分感激。
...全文
请发表友善的回复…
发表回复
bensonxie 2018-02-24
- 打赏
- 举报
十分感谢
似梦飞花 2018-02-22
- 打赏
- 举报
<style>
div{
position: fixed;
bottom: 0;
-webkit-transform:translate(0%,100%);
-webkit-transition: transform .5s linear 0s;
transform:translate(0%,100%);
transition: transform .5s linear 0s;
}
div>p{
counter-increment: add;
}
div>p:after{
content: counter(add);
}
.show{
-webkit-transform:translate(0%,0%);
transform:translate(0%,0%);
}
</style>
</head>
<body>
<input type="button" value="change" />
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script>
var div=document.querySelector('div');
document.querySelector('input').onclick=function(){
div.classList.toggle('show');
}
</script>
</body>
