采纳追加赏 2022-08-28 19:10 采纳率: 35.3%
浏览 58
已结题

jq移动位置改变定位

当当前项目鼠标移到下面,图片顶到下面的时候,判断定位改变上下。
效果:

img


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 效果测试 </title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>

<style type="text/css">
*{margin:0px;padding:0px;list-style: none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration: none;}    
.box{width: 1000px;margin: 100px auto;padding: 20px 0;border: 2px #ddd solid;background: #dadada;}
.flow{padding: 0 80px;height: 400px;overflow-y: scroll;}
.force-overflow{min-height: 0px;}
.list{ }
.list li{border-bottom:1px #aaa solid;cursor: pointer;}
.list a{position: relative;display: block;}
.list .theme{display: flex;color:#000;padding: 15px 0;font-size: 20px;justify-content: space-between;align-items: center}
.list .pic{opacity: 0;display: flex;position: absolute;left:0;top: 70px;right:0;z-index: 2;margin: auto;max-width:40%;height:400px;transform:translateY(5px);transition: all .5s ease-in-out;align-items: center;justify-content: center;}
.list .pic img{/* width:100%; */height: 100%;object-fit: cover;}
.list li:hover h4{color:red }
.list li:hover .pic{opacity: 1;}
</style>
<div class="box">
    <div class="flow">
      <ul class="list">
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 01</h4><span>2022</span></div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 02</h4><span>2022</span></div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 03</h4><span>2022</span></div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 04</h4><span>2022</span></div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 05</h4><span>2022</span></div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 06</h4><span>2022</span></div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 07</h4><span>2022</span></div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 08</h4><span>2022</span></div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <div class="theme"><h4>DATA - 09</h4><span>2022</span></div>
            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
          </a>
        </li>
        
      </ul>
      <div class="force-overflow"></div>
    </div>
  </div>

<script>

</script>  

</body>
</html>

  • 写回答

4条回答 默认 最新

  • Z_pigeon 2022-08-28 20:35
    关注

    hover的时候图片始终在中间如何,这样就不用根据距离判断图片到底是出现在上面还是下面

    
    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 效果测试 </title>
        <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
    </head>
    
    <body>
    
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
                list-style: none;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                text-decoration: none;
            }
    
            .box {
                width: 1000px;
                margin: 100px auto;
                padding: 20px 0;
                border: 2px #ddd solid;
                background: #dadada;
            }
    
            .flow {
                padding: 0 80px;
                height: 400px;
                overflow-y: scroll;
            }
    
            .force-overflow {
                min-height: 0px;
            }
    
            .list {
                position: relative
            }
    
            .list li {
                border-bottom: 1px #aaa solid;
                cursor: pointer;
            }
    
            .list a {
                /* position: relative; */
                display: block;
            }
    
            .list .theme {
                display: flex;
                color: #000;
                padding: 15px 0;
                font-size: 20px;
                justify-content: space-between;
                align-items: center
            }
    
            .list .pic {
                opacity: 0;
                display: flex;
                position: absolute;
                left: 50%;
                top: 50%;
                z-index: 2;
                margin: auto;
                max-width: 40%;
                height: 400px;
                transform: translate(-50%, -50%);
                transition: all .5s ease-in-out;
                align-items: center;
                justify-content: center;
            }
    
            .list .pic img {
                /* width:100%; */
                height: 100%;
                object-fit: cover;
            }
    
            .list li:hover h4 {
                color: red
            }
    
            .list li:hover .pic {
                opacity: 1;
            }
        </style>
        <div class="box">
            <div class="flow">
                <ul class="list">
                    <li>
                        <a href="javascript:void(0)">
                            <div class="theme">
                                <h4>DATA - 01</h4><span>2022</span>
                            </div>
                            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <div class="theme">
                                <h4>DATA - 02</h4><span>2022</span>
                            </div>
                            <div class="pic"><img src="https://img2.baidu.com/it/u=1249099614,3534836312&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=448"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <div class="theme">
                                <h4>DATA - 03</h4><span>2022</span>
                            </div>
                            <div class="pic"><img src="https://img1.baidu.com/it/u=1960292808,1761809160&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <div class="theme">
                                <h4>DATA - 04</h4><span>2022</span>
                            </div>
                            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <div class="theme">
                                <h4>DATA - 05</h4><span>2022</span>
                            </div>
                            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <div class="theme">
                                <h4>DATA - 06</h4><span>2022</span>
                            </div>
                            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <div class="theme">
                                <h4>DATA - 07</h4><span>2022</span>
                            </div>
                            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <div class="theme">
                                <h4>DATA - 08</h4><span>2022</span>
                            </div>
                            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <div class="theme">
                                <h4>DATA - 09</h4><span>2022</span>
                            </div>
                            <div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
                        </a>
                    </li>
    
                </ul>
                <div class="force-overflow"></div>
            </div>
        </div>
    
        <script>
        </script>
    
    </body>
    
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 9月6日
  • 已采纳回答 8月29日
  • 创建了问题 8月28日

悬赏问题

  • ¥15 Arduino,利用modbus的RS485协议,进行对外置的温湿度传感器进行数据读取
  • ¥15 vhdl+MODELSIM
  • ¥20 simulink中怎么使用solve函数?
  • ¥30 dspbuilder中使用signalcompiler时报错Error during compilation: Fitter failed,求解决办法
  • ¥15 gwas 分析-数据质控之过滤稀有突变中出现的问题
  • ¥15 没有注册类 (异常来自 HRESULT: 0x80040154 (REGDB_E_CLASSNOTREG))
  • ¥15 知识蒸馏实战博客问题
  • ¥15 用PLC设计纸袋糊底机送料系统
  • ¥15 simulink仿真中dtc控制永磁同步电机如何控制开关频率
  • ¥15 用C语言输入方程怎么