前端开发简单加入购物车功能

前端开发的组件是什么微信小程序前端用什么开发前端开发后端开发是什么意思

没做scrollTop处理。。。

代码片段 1

<!DOCTYPE html>

<head>

<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>

鼠标点击空白，购物车移到鼠标点击处。

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

前端开发简单加入购物车功能

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

回顶部

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

回顶部

评论抢沙发