js margin例子
时间: 2023-12-08 17:04:45 浏览: 15
以下是一个JS设置元素外边距的例子:
```javascript
// 获取元素
var element = document.getElementById("myDiv");
// 设置元素外边距
element.style.margin = "10px 20px 30px 40px";
```
上述代码中,我们首先通过`document.getElementById()`方法获取了一个id为"myDiv"的元素,然后使用`element.style.margin`属性来设置元素的外边距。其中,"10px"表示上边距,"20px"表示右边距,"30px"表示下边距,"40px"表示左边距。这样,我们就成功地设置了元素的外边距。
相关问题
javascript图片轮翻的例子
以下是一个简单的JavaScript图片轮播的例子:
HTML代码:
```html
<div class="slideshow-container">
<div class="mySlides fade">
<img src="image1.jpg">
</div>
<div class="mySlides fade">
<img src="image2.jpg">
</div>
<div class="mySlides fade">
<img src="image3.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
```
CSS代码:
```css
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
```
JavaScript代码:
```javascript
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000);
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
```
在这个例子中,我们定义了一个 `showSlides()` 函数,它会循环显示图片。我们还定义了一个 `plusSlides(n)` 函数,该函数将向前或向后移动幻灯片。我们使用 CSS 将两个箭头放在幻灯片的左右两侧,用于移动幻灯片。
请注意,这只是一个简单的示例,实际上,您可能需要更复杂的功能来创建一个真正的网站上的图片轮播。
想要一个three.js的例子
好的,以下是一个简单的three.js例子,创建一个立方体并渲染到屏幕上:
```html
<!DOCTYPE html>
<html>
<head>
<title>Three.js Example</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
75, // 视野角度
window.innerWidth / window.innerHeight, // 宽高比
0.1, // 近截面
1000 // 远截面
);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 渲染场景
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
```
这个例子创建了一个场景、相机、渲染器和一个绿色的立方体,然后通过animate函数不断旋转立方体并渲染场景,最终呈现在屏幕上。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)