如何旋转包含项目的圆

我一直在尝试使用按钮旋转一个圆圈，其中包含项目，当我直接在css中更改圆圈的旋转值时，效果很好，但html代码中似乎有问题。html代码：

<html>
<head>
<title>web desgin test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<nav>
<div class="logo">
<img 
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/logo.png" 
alt="">
</div>
<div class="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Cart</a></li>
</ul>
</div>
</nav>
<div class="information">
<img 
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/mobile.png" 
class="mobile">
<div id="circle">
<div class="feature one">
<img 
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/camera.png" 
alt="">
<div>
<h1>Camera</h1>
<p>108MP Main camera</p>
</div>
</div>
<div class="feature two">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/processor.png" alt="">
<div>
<h1>processor</h1>
<p>Exynos 990</p>
</div>
</div>
<div class="feature three">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/display.png" alt="">
<div>
<h1>Display</h1>
<p>6.9 inch, 1440px</p>
</div>
</div>
<div class="feature four">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/battery.png" alt="">
<div>
<h1>Battery</h1>
<p>4500 mA</p>
</div>
</div>

</div>
</div>
<div class="controls">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/arrow.png" id="upBtn">
<h3>Features</h3>
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/arrow.png" id="downBtn">
</div>
</div>
<script>
var circle = document.getElementById('circle');
var upBtn = document.getElementById('upBtn');
var downBtn = document.getElementById('downBtn');
var rotateValue = circle.style.transform();
var rotateSum;
upBtn.onclick = function() {
rotateSum = rotateValue + "rotate(-90deg)";
circle.style.transform = rotateSum;
rotateValue = rotateSum;
}
</script>

css代码：

#circle {
width: 1000px;
height: 1000px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
transform: rotate(0deg);
.controls {
position: absolute;
right: 10%;
top: 50%;`enter code here`
transform: translateY(-50%);
text-align: center;
}
.controls h3 {
margin: 15px 0;
color: #fff;
}
#upBtn {
width: 15px;
cursor: pointer;
}
#downBtn {
width: 15px;
cursor: pointer;
transform: rotate(180deg);
}

例如，如果id是#circle，则变量声明是错误的

document.getElementById(circle);->document.getElementById('circle');

当你根据这个功能发布所有html时，效果会更好

html代码中没有circle。。。所以当你这样做的时候：

var circle = document.getElementById(circle);

var circle is null，因为没有一个html元素的id是圆形，并且您正试图使用这样一个调用的元素此外，当你这样做时：

document.getElementById(circle);将在每个id中查找一个字符串，因此它应该是：

document.getElementById('circle');

编辑：很明显，当你使用选择器时，你正在寻找一个匹配的字符串，当你这样做时：

var circle = document.getElementById(circle);
var upBtn = document.getElementById(upBtn);
var downBtn = document.getElementById(downBtn);

应该是这样的：

var circle = document.getElementById('circle');
var upBtn = document.getElementById('upBtn');
var downBtn = document.getElementById('downBtn');

在第一个例子中，你说寻找一个值为os circle 的字符串

var circle = 'notCircle'
var circle = document.getElementById(circle);
console.log(circle)

在第二个中，你正在html id 上直接查找x字符串

相关内容

最新更新

热门标签：