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

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

没做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
赞(0)
64K

评论 抢沙发

评论前必须登录!