JQuery中实现按键变色代码
时间: 2024-03-25 18:42:06 浏览: 27
下面是一个JQuery实现按下按键改变元素颜色的示例代码:
HTML代码:
```
<p id="text">按下任意键改变颜色</p>
```
JQuery代码:
```
$(document).keydown(function() {
$('#text').css('color', 'red');
});
$(document).keyup(function() {
$('#text').css('color', 'black');
});
```
这个代码片段中,我们使用了JQuery的keydown()和keyup()方法来检测键盘事件。当用户按下键盘时,keydown()方法被触发,我们使用css()方法将元素颜色设置为红色。当用户释放键盘时,keyup()方法被触发,我们使用css()方法将元素颜色设置为黑色。
相关问题
jquery实现按键浮动
以下是使用jQuery实现按键浮动的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>按键浮动示例</title>
<style type="text/css">
.container {
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 2000px;
height: 300px;
}
.slider img {
float: left;
width: 500px;
height: 300px;
}
.btn {
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
line-height: 40px;
font-size: 20px;
cursor: pointer;
z-index: 999;
}
.btn-prev {
left: 0;
}
.btn-next {
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</div>
<div class="btn btn-prev"><</div>
<div class="btn btn-next">></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var slider = $('.slider');
var sliderWidth = slider.width();
var sliderImg = slider.find('img');
var sliderImgLen = sliderImg.length;
var sliderTotalWidth = sliderWidth * sliderImgLen;
var currentIndex = 0;
var timer = null;
slider.css('width', sliderTotalWidth);
$('.btn-prev').click(function() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = sliderImgLen - 1;
slider.css('left', -sliderWidth * (sliderImgLen - 1));
}
slider.stop().animate({
left: -sliderWidth * currentIndex
}, 500);
});
$('.btn-next').click(function() {
currentIndex++;
if (currentIndex > sliderImgLen - 1) {
currentIndex = 0;
slider.css('left', 0);
}
slider.stop().animate({
left: -sliderWidth * currentIndex
}, 500);
});
function autoPlay() {
timer = setInterval(function() {
$('.btn-next').trigger('click');
}, 2000);
}
autoPlay();
$('.container').hover(function() {
clearInterval(timer);
}, function() {
autoPlay();
});
});
</script>
</body>
</html>
```
jquery轮播图实现简单代码
以下是一个简单的jquery轮播图实现代码示例:
HTML代码:
```
<div class="slider">
<img src="img1.jpg" alt="Image 1">
<img src="img2.jpg" alt="Image 2">
<img src="img3.jpg" alt="Image 3">
</div>
```
CSS代码:
```
.slider {
position: relative;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1s;
}
.slider img.active {
opacity: 1;
}
```
jQuery代码:
```
$(document).ready(function() {
// 初始化
$('.slider img:first').addClass('active');
// 自动轮播
setInterval(function() {
var current = $('.slider img.active');
var next = current.next();
if (next.length === 0) {
next = $('.slider img:first');
}
current.removeClass('active');
next.addClass('active');
}, 3000);
});
```
这个代码会自动轮播轮播图,每隔3秒钟切换到下一张图片。如果到达最后一张图片,它会自动返回第一张图片。
相关推荐
![](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)