js代码特效

新星源码网 3月 25日 4 0

JavaScript 是一种强大的编程语言，它经常用于为网页添加交互性和动态效果。以下是一个简单的 JavaScript 代码示例，该代码用于在点击按钮时改变文本的颜色：

HTML 部分：

html复制代码
<!DOCTYPE html>  
<html>  
<body>  
  
<h1 id="myText">Hello World!</h1>  
  
<button onclick="changeColor()">点击改变颜色</button>  
  
<script src="script.js"></script>  
  
</body>  
</html>

JavaScript 部分 (保存为 script.js 文件)：

javascript复制代码
function changeColor() {  
  var text = document.getElementById("myText");  
  text.style.color = "red"; // 你可以改变这个颜色为你想要的任何颜色  
}

在这个示例中，我们首先创建了一个包含文本 "Hello World!" 的 <h1> 标签，并给它一个唯一的 ID (myText)。然后，我们创建了一个按钮，当点击这个按钮时，会调用 changeColor 函数。

changeColor 函数首先通过 document.getElementById 方法获取到我们的文本元素。然后，它改变这个元素的 style.color 属性，使其变为红色。

这只是一个非常基础的示例，JavaScript 可以做的事情远不止这些。你可以使用 JavaScript 来创建动画、处理用户输入、发送网络请求等等。只要你愿意学习，JavaScript 可以为你打开无限的可能性。

当然，JavaScript 的功能远不止于此。以下是一些更高级的 JavaScript 代码特效示例，这些特效可以为你的网页增添更多的动态性和交互性。

1. 滑动门特效

使用 JavaScript 和 CSS 实现的滑动门效果，通常用于导航菜单的悬停效果。

HTML:

html复制代码
<nav>  
  <ul>  
    <li class="menu-item"><a href="#">Home</a></li>  
    <li class="menu-item"><a href="#">About</a></li>  
    <li class="menu-item"><a href="#">Contact</a></li>  
  </ul>  
</nav>

CSS:

css复制代码
.menu-item {  
  position: relative;  
  width: 100px;  
  height: 30px;  
  line-height: 30px;  
  text-align: center;  
  background: #ddd;  
  transition: background 0.3s ease;  
}  
  
.menu-item:hover {  
  background: #999;  
}  
  
.menu-item::after {  
  content: "";  
  position: absolute;  
  top: 100%;  
  left: 0;  
  width: 100%;  
  height: 0;  
  background: #777;  
  transition: height 0.3s ease;  
}  
  
.menu-item:hover::after {  
  height: 10px;  
}

JavaScript (可选，用于增强交互效果):

javascript复制代码
const menuItems = document.querySelectorAll('.menu-item');  
  
menuItems.forEach(item => {  
  item.addEventListener('mouseover', () => {  
    item.style.cursor = 'pointer';  
  });  
    
  item.addEventListener('mouseout', () => {  
    item.style.cursor = 'default';  
  });  
});

2. 模态框（Modal）

模态框是一种覆盖在网页内容上的对话框，通常用于显示重要信息或要求用户输入。

HTML:

html复制代码
<div id="myModal" class="modal">  
  <div class="modal-content">  
    <span class="close">&times;</span>  
    <p>这是一些模态框文本...</p>  
  </div>  
</div>  
  
<button id="openModal">打开模态框</button>

CSS:

css复制代码
.modal {  
  display: none;  
  position: fixed;  
  z-index: 1;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  overflow: auto;  
  background-color: rgba(0,0,0,0.4);  
}  
  
.modal-content {  
  background-color: #fefefe;  
  margin: 15% auto;  
  padding: 20px;  
  border: 1px solid #888;  
  width: 80%;  
}  
  
.close {  
  color: #aaa;  
  float: right;  
  font-size: 28px;  
  font-weight: bold;  
}  
  
.close:hover,  
.close:focus {  
  color: black;  
  text-decoration: none;  
  cursor: pointer;  
}

JavaScript:

javascript复制代码
const modal = document.getElementById('myModal');  
const btn = document.getElementById('openModal');  
const span = document.getElementsByClassName('close')[0];  
  
btn.onclick = function() {  
  modal.style.display = 'block';  
}  
  
span.onclick = function() {  
  modal.style.display = 'none';  
}  
  
window.onclick = function(event) {  
  if (event.target == modal) {  
    modal.style.display = 'none';  
  }  
}

3. 图片轮播（Carousel）

使用 JavaScript 控制图片的自动播放和手动切换。

HTML:

html复制代码
<div class="carousel">  
  <img class="carousel-image active" src="image1.jpg" alt="Image 1">  
  <img class="carousel-image" src="image2.jpg" alt="Image 2">  
  <img class="carousel-image" src="image3.jpg" alt="Image 3">  
</div>  
  
<button id="prev">上一张</button>  
<

js代码特效

1. 滑动门特效

2. 模态框（Modal）

3. 图片轮播（Carousel）

热门文章

文章目录

	<!DOCTYPE html>
	<html>
	<body>

	<h1 id="myText">Hello World!</h1>

	<button onclick="changeColor()">点击改变颜色</button>

	<script src="script.js"></script>

	</body>
	</html>

	function changeColor() {
	var text = document.getElementById("myText");
	text.style.color = "red"; // 你可以改变这个颜色为你想要的任何颜色
	}

	<nav>
	<ul>
	<li class="menu-item"><a href="#">Home</a></li>
	<li class="menu-item"><a href="#">About</a></li>
	<li class="menu-item"><a href="#">Contact</a></li>
	</ul>
	</nav>

	.menu-item {
	position: relative;
	width: 100px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #ddd;
	transition: background 0.3s ease;
	}

	.menu-item:hover {
	background: #999;
	}

	.menu-item::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 0;
	background: #777;
	transition: height 0.3s ease;
	}

	.menu-item:hover::after {
	height: 10px;
	}

	const menuItems = document.querySelectorAll('.menu-item');

	menuItems.forEach(item => {
	item.addEventListener('mouseover', () => {
	item.style.cursor = 'pointer';
	});

	item.addEventListener('mouseout', () => {
	item.style.cursor = 'default';
	});
	});

	<div id="myModal" class="modal">
	<div class="modal-content">
	<span class="close">×</span>
	<p>这是一些模态框文本...</p>
	</div>
	</div>

	<button id="openModal">打开模态框</button>

	.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
	}

	.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	}

	.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	}

	.close:hover,
	.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
	}

	const modal = document.getElementById('myModal');
	const btn = document.getElementById('openModal');
	const span = document.getElementsByClassName('close')[0];

	btn.onclick = function() {
	modal.style.display = 'block';
	}

	span.onclick = function() {
	modal.style.display = 'none';
	}

	window.onclick = function(event) {
	if (event.target == modal) {
	modal.style.display = 'none';
	}
	}

	<div class="carousel">
	<img class="carousel-image active" src="image1.jpg" alt="Image 1">
	<img class="carousel-image" src="image2.jpg" alt="Image 2">
	<img class="carousel-image" src="image3.jpg" alt="Image 3">
	</div>

	<button id="prev">上一张</button>
	<

1. 滑动门特效

2. 模态框（Modal）

3. 图片轮播（Carousel）

Related

热门文章

文章目录