HTML+CSS+JavaScript实现点击大于，小于号切换图片_css侧边图片展开收起大于小于号

作者：weixin_40725706 | 2024-03-23 19:48:52

踩

css侧边图片展开收起大于小于号

大于号和小于号按钮不使用键盘上的，因为太细，效果没有这样好：

.sdater {
   
            width: 8px;
            height: 8px;
            border-top: 4px solid white;
            border-right: 4px solid white;
            transform: rotate(45deg);
        }
1
2
3
4
5
6
7
8

div盒子为正方形，先在上和右添加边框，最后翻转成菱形，就实现了大于号。当然，为了视觉效果，可以加上：

.sdater:hover {
   
            padding: 5px;
            background-color: grey;
        }
1
2
3
4
5

鼠标划过反应。
小于号可以这样，就是在下和左添加边框即可：

.sdator {
   
            width: 8px;
            height: 8px;
            border-bottom: 4px solid white;
            border-left: 4px solid white;
            transform: rotate(45deg);
        }
1
2
3
4
5
6
7
8

鼠标划过：

.sdator:hover {
   
            padding: 5px;
            background-color: grey;
        }
1
2
3
4
5

功能实现(JavaScript)：
图片切换可以使用z-index方法，点击大于号或小于号，z-index就在原来上+1（图片使用position: absolute实现重叠），完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <style>
        * 1
2
3
4
5
6
7

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/297275

HTML+CSS+JavaScript实现点击大于，小于号切换图片_css侧边图片展开收起 大于小于号

HTML+CSS+JavaScript实现点击大于，小于号切换图片_css侧边图片展开收起大于小于号