前端开发 简单加入购物车功能
摘要：前端开发的组件是什么 微信小程序前端用什么开发 前端开发后端开发是什么意思 没做scrollTop处理。。。 代码片段 1 <!DOCTYPE html> <html lang=”en”> <head> <meta charse……
前端开发的组件是什么 微信小程序前端用什么开发 前端开发后端开发是什么意思
没做scrollTop处理。。。
代码片段 1
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”Author” content=”” />
<meta name=”Keywords” content=”” />
<meta name=”Description” content=”” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no,minimal-ui” />
<title>Document</title>
<style>
span,
div {
position: absolute;
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
z-index: 2;
}
span {
background-color: blue;
}
div {
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: red;
cursor: pointer;
}
div.move {
right: auto;
bottom: auto;
z-index: 1;
transition: all 1s;
-webkit-transition: all 1s;
}
</style>
</head>
<body>
鼠标点击空白，购物车移到鼠标点击处。
<span>购物车</span>
<div>加入</div>
<script>
var span = document.querySelector(“span”),
div = document.querySelector(“div”);
document.onclick = function (e) {
span.style.left = e.clientX – 15 + “px”;
span.style.top = e.clientY – 15 + “px”;
};
div.onclick = function (e) {
e.stopPropagation();
var d = this.cloneNode(false),
crd = span.getBoundingClientRect(),
crd1 = div.getBoundingClientRect();
d.style.left = crd1.left + “px”;
d.style.top = crd1.top + “px”;
d.className = “move”;
document.body.appendChild(d);
getComputedStyle(d, null)[“left”];
d.style.left = crd.left + “px”;
d.style.top = crd.top + “px”;
d.style.transform = d.style.webkitTransform = “rotate(360deg)”;
d.style.opacity = 0;
};
</script>
</body>
</html>
web前端开发作用是什么意思 erp系统前端用什么语言开发 学什么专业可从事前端开发
» 本文来自：前端开发者 » 《前端开发 简单加入购物车功能》
» 本文链接地址：https://www.rokub.com/5568.html
» 您也可以订阅本站：https://www.rokub.com
近期评论