jquery实现点击图片显示隐藏内容
时间: 2023-10-16 07:06:22 浏览: 54
可以使用以下代码实现:
HTML部分:
```html
<img src="图片路径" class="img-click">
<div class="content" style="display:none;">隐藏内容</div>
```
jQuery部分:
```javascript
$(function(){
$(".img-click").click(function(){
$(this).next(".content").toggle();
});
});
```
解释一下代码的作用:
1. 首先给图片添加一个class为"img-click",并给隐藏内容添加一个class为"content";
2. 使用jQuery的click()方法来绑定图片的点击事件;
3. 使用next()方法获取图片下一个兄弟元素,也就是隐藏内容;
4. 使用toggle()方法来切换隐藏内容的显示和隐藏状态。
相关问题
HTML点击图片出现边框,简单的jQuery实现点击图片出现弹框【原创】
好的,我了解您的问题。对于第一个问题,您可以通过CSS来控制图片的边框样式,例如:
```css
img {
border: 1px solid #000;
}
```
这会在所有的图片周围添加一个1像素宽、黑色实线边框。您可以根据需要调整边框的宽度、颜色和样式。
对于第二个问题,您可以使用jQuery来实现在点击图片时出现弹框的效果。以下是一个简单的实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击图片出现弹框</title>
<style>
/* 给图片添加样式 */
img {
display: block;
margin: 20px auto;
width: 200px;
height: 200px;
}
/* 遮罩层样式 */
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none;
}
/* 弹框样式 */
#dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
z-index: 10000;
display: none;
}
</style>
</head>
<body>
<img src="https://picsum.photos/200/200" alt="图片">
<img src="https://picsum.photos/200/200" alt="图片">
<img src="https://picsum.photos/200/200" alt="图片">
<!-- 遮罩层和弹框 -->
<div id="overlay"></div>
<div id="dialog"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('img').on('click', function() {
// 获取图片的src属性值
var src = $(this).attr('src');
// 显示遮罩层
$('#overlay').show();
// 显示弹框并设置图片
$('#dialog').html('<img src="' + src + '">').show();
});
// 点击遮罩层或弹框时隐藏弹框
$('#overlay, #dialog').on('click', function() {
$('#overlay, #dialog').hide();
});
});
</script>
</body>
</html>
```
以上代码会在页面中显示三张图片,当您点击其中一张图片时,会出现一个遮罩层和一个弹框,其中弹框中包含被点击的图片。当您再次点击遮罩层或弹框时,弹框会隐藏。您可以根据需要调整样式和代码。
使用jQuery完成按键点击实现图片或者块级元素的显示、隐藏、淡入、淡出以及半透明动画效果
以下是使用jQuery完成按键点击实现图片或者块级元素的显示、隐藏、淡入、淡出以及半透明动画效果的例子:
1. 显示和隐藏图片
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("img").hide();
});
$("#show").click(function(){
$("img").show();
});
});
</script>
</head>
<body>
<button id="hide">隐藏图片</button>
<button id="show">显示图片</button>
<br><br>
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="鲜花" width="100" height="100">
</body>
</html>
```
2. 淡入和淡出图片
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOut").click(function(){
$("img").fadeOut();
});
$("#fadeIn").click(function(){
$("img").fadeIn();
});
});
</script>
</head>
<body>
<button id="fadeOut">淡出图片</button>
<button id="fadeIn">淡入图片</button>
<br><br>
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="鲜花" width="100" height="100">
</body>
</html>
```
3. 半透明图片
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#opacity").click(function(){
$("img").css("opacity", "0.5");
});
});
</script>
</head>
<body>
<button id="opacity">半透明图片</button>
<br><br>
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="鲜花" width="100" height="100">
</body>
</html>
```
4. 显示和隐藏块级元素
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<button id="hide">隐藏段落</button>
<button id="show">显示段落</button>
<br><br>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
```
5. 淡入和淡出块级元素
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOut").click(function(){
$("p").fadeOut();
});
$("#fadeIn").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<button id="fadeOut">淡出段落</button>
<button id="fadeIn">淡入段落</button>
<br><br>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
```