使用js和html,css实现点击一个图片后,图片放大,然后一个原本是隐藏的框显示出来,这个框的位置是紧紧靠着图片,框里面有一列一列的选项,每一列选项都是一个a标签,风格简约大气,有艺术感
时间: 2023-11-30 07:05:05 浏览: 44
好的,这个需求可以使用 CSS3 的 transform 属性来实现图片放大,同时使用绝对定位和 top/left 属性来实现框的位置紧贴在图片旁边。选项可以使用 div 和 a 标签来实现,再使用 CSS3 的 hover 属性来添加鼠标悬浮效果。
具体代码如下:
HTML代码:
```
<div class="image-container">
<img src="your-image-url" alt="your-image-description">
<div class="options-container">
<div class="option-column">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
<div class="option-column">
<a href="#">Option 4</a>
<a href="#">Option 5</a>
<a href="#">Option 6</a>
</div>
<div class="option-column">
<a href="#">Option 7</a>
<a href="#">Option 8</a>
<a href="#">Option 9</a>
</div>
</div>
</div>
```
CSS代码:
```
.image-container {
position: relative;
width: 300px;
height: 300px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: transform 0.3s ease-out;
}
.image-container:hover img {
transform: scale(1.2);
}
.options-container {
display: none;
position: absolute;
top: 0;
left: 100%;
margin-left: 20px;
width: 200px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.option-column {
display: flex;
flex-direction: column;
}
.option-column a {
text-decoration: none;
color: #333;
font-size: 16px;
padding: 5px;
transition: background-color 0.3s ease-out;
}
.option-column a:hover {
background-color: #f5f5f5;
}
.image-container:hover .options-container {
display: block;
}
```
这样就实现了点击图片放大,同时显示选项框的效果。你可以根据实际需求进行调整样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)