您的位置：首页 > Web前端 > CSS

关于JS控制CSS3动画(@keyframes)的一个小技巧

2019-04-10 15:21 405 查看 
<!-- 购物车效果-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.goods{
width:100%;
height:100vh;
}
.goods>.goodsList{
height:15vh;
border-top:1px solid #ddd;
}
.goods>.goodsList>.goodsListButton{
float: right;
margin-top:2vh;
margin-right:3vh;
}
.goods>.goodsList:last-child{
border-bottom:1px solid #ddd;
}
.goods>.goodsList>div{  /*生成的div*/
width:30px;
height:30px;
background:red;
animation:mymove 1s;
position:absolute;
}
/* @keyframes mymove {
0% {top:0px;}
10% {left:65.5%}
100% {top:100%;left:65.5%;}
} */
footer{
position:fixed;
width:100%;
display: flex;
bottom:0;
background:red;
border-top:1px solid red;
height:8vh;
}
footer>div{
width:25vw;
height:100%;
line-height:8vh;
font-size:13px;
color:#fff;
text-align: center;
}
footer>div:nth-child(3){
background:#ddd;
}
</style>
</head>
<body>
<div class="goods">
<div class="goodsList"><button class="goodsListButton">加入购物车</button></div>
<div class="goodsList"><button class="goodsListButton">加入购物车</button></div>
<div class="goodsList"><button class="goodsListButton">加入购物车</button></div>
<div class="goodsList"><button class="goodsListButton">加入购物车</button></div>
</div>
<footer>
<div>1</div>
<div>2</div>
<div>购物车</div>
<div>4</div>
</footer>
</body>
<script>

//添加css规则
function addCSSRule(sheet, selector, rules, index) {
if("insertRule" in sheet) {
sheet.insertRule(selector + "{" + rules + "}", index);
}else if("addRule" in sheet) {
sheet.addRule(selector, rules, index);
}
}
//删除CSS规则
function delCSSRule(sheet){
sheet.deleteRule(0)
}

//预加载
window.onload = function(){
const goods = document.querySelector(".goods");
goods.onclick = function(e){
const target = e.target;
if(target.tagName == "BUTTON"){
const goodsListButton = document.querySelectorAll(".goodsListButton");
const clientX = e.clientX; //当前X坐标
const clientY = e.clientY; //当前Y坐标
var div = document.createElement("div");target.after(div); //生成DIV节点
var divNode = target.parentNode.getElementsByTagName("div")[0];
divNode.style.top = (clientY - divNode.clientWidth / 2) + "px"; //X坐标赋值
divNode.style.left = (clientX - divNode.clientHeight / 2) + "px"; //Y坐标赋值

for(var i=0; i < goodsListButton.length; i++){
goodsListButton[i].disabled = true;  //禁止多次点击
}

//动态添加规则
addCSSRule(document.styleSheets[0], "@keyframes mymove", `0% {top:${clientY}px;}20% {left:65.5%}100% {top:100%;left:65.5%;}`);
//删除规则
setTimeout(function(){
delCSSRule(document.styleSheets[0]);
divNode.parentNode.removeChild(divNode);
for(var i=0; i < goodsListButton.length; i++){
goodsListButton[i].disabled = false;
}
},1000)
}
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航