• ❋JQuery的快速入门2 jq鼠标滚轮

    onmousewheelscript当鼠标滚轮正在被滚动时运行的脚本。

    主要是利用top与left进行上下移动和左右移动

    【使用获取的角度正值还是负值，判断是向上还是上下滚动】

    1.  $(element).on("mousewheel", function(event){
    2.                 var de= event.originalEvent.deltaY; //需要取反
    3. })

    案例：城市介绍【照片与城市介绍一样的写法，就不写了】

    先用HTML和css做出样式

    1.   .box中横向分布left和right盒子
    2.   .left盒子中纵向分布多个li
    3.   .right盒子中纵向分布top和bottom盒子
    4.    填入城市名，城市介绍，城市图片

    1. 根据选择的城市，切换介绍

    先隐藏p标签和img标签，分别只留一个元素【区分class】

    获取所有的li【li数组】，获取所有的p标签【p数组】，获取所有的img标签【img数组】。

    点击li，获取该li的行号（index），循环p和img，隐藏所有的元素【切换class】

    利用行号将对应的元素切换展示

    1.  
    2.  var ps=$('.right p');
    3.         $('.left').on('click','li',function(){
    4.             inx=$(this).index();
    5.             for(var i=0;ilength;i++){
    6.                 ps[i].className='pa';
    7.              }
    8.              ps[inx].className='para';
    9.         })

    图片也是一样的

    2. 为城市名添加滚动样式【主要】

    添加滚动不难，但是它会超出已有范围，先获取这个可滚动的范围【父盒子 - 子盒子】

    在不超过这个范围内更改.left的top属性

    top为正，绿色盒子向下走

    top为负，绿色盒子向上走

    1. var pdiv=$('.box').height();
    2. var cdiv=$('.box>.left').height();
    3. var high=pdiv-cdiv; // -100

    top的更改是随着上次的距离一点一点增加或缩短的，-=或+=

    用现在的top和最大top值和最小top值进行比较

    获取当前top的大小，$(element).css('top')【获取的是字符串类型】

    将字符串转为数字，使用正则表达式获取px前的数字【返回数组】，在转换为Number类型进行比较

    当角度<0,向下走

            绿色盒子的top值>0就会让绿色盒子向下走，直到>=0这时会使绿色盒子的顶部远离红色盒子顶部，所以不在向下走。

    当角度>0,向上走

            绿色盒子的top<隐藏值时继续向上奏，直到>=隐藏值 这时会使绿色盒子的底部远离红色盒子底部，所以不在向上走。

    【de没有取反，所以if下内容写反】

    1. reg=/\d+|-\d+/
    2. $('.left').on("mousewheel", function(event){
    3.                 var de= event.originalEvent.deltaY;
    4.                 tp=$(this).css('top');
    5. 				var tpn=Number(tp.match(reg)[0]);
    6.  
    7.                 if(de < 0){
    8. 					if(tpn < 0){
    9.                         $(this).css('top','+=10px');
    10. 						
    11. 					}else{
    12. 						$(this).css('top','0px');
    13. 					}
    14. 				}else{
    15. 					if(tpn >= high){// 距离顶部的距离 > 子盒子隐藏的距离
    16. 						$(this).css('top','-=10px');
    17. 					}else{
    18. 						$(this).css('top',high+'px');
    19.                     }
    20.                 }
    21. })

     总代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <script src="jquery-3.6.0.min.js">script>
    7.     <title>Documenttitle>
    8.     <style>
    9.         *{
    10.             padding: 0;
    11.             margin: 0;
    12.             list-style: none;
    13.             
    14.         }
    15.         .box{
    16.             position: relative;
    17.             width: 400px;
    18.             height: 200px;
    19.             border: 1px solid black;
    20.             margin: 0 auto;
    21.             overflow: hidden;
    22.         }
    23.         .left{
    24.             position: relative;
    25.             top: 0px;
    26.             width: 60px;
    27.         }
    28.         .left>li{
    29.             height: 30px;
    30.             line-height: 30px;
    31.             border-top: 1px solid;
    32.             border-top: 1px solid;
    33.             border-color: green;
    34.         }
    35.         .right{
    36.             width: 338px;
    37.             border-left: 1px solid;
    38.             position: relative;
    39.         }
    40.         .right>.top{
    41.             background-color: antiquewhite;
    42.             height: 70px;
    43.         }
    44.         .right>.bottom{
    45.             width: 100%;
    46.             height: 128px;
    47.             position: relative;
    48.             overflow: hidden;
    49.             
    50.         }
    51.         .box>div{
    52.             text-align: center;
    53.             float: left;
    54.         }
    55.         p{
    56.             position: relative;
    57.             top: 0px;
    58.             font-size: 15px;
    59.             text-indent: 2em;
    60.             text-align: left;
    61.         }
    62.         .pa{
    63.             display: none;
    64.         }
    65.     style>
    66. head>
    67. <body>
    68.     <script>
    69.         $(function(){
    70.             var pdiv=$('.box').height();
    71.             var cdiv=$('.box>.left').height();
    72.             var high=pdiv-cdiv; // -100
    73.             reg=/\d+|-\d+/
    74.  
    75.             $('.left').on("mousewheel", function(event){
    76.                 var de= event.originalEvent.deltaY;
    77.                 tp=$(this).css('top');
    78. 				var tpn=Number(tp.match(reg)[0]);
    79.  
    80.                 if(de < 0){//为负时远离顶部，top增加
    81. 					if(tpn < 0){
    82.                         $(this).css('top','+=10px');
    83. 						
    84. 					}else{
    85. 						$(this).css('top','0px');
    86. 					}
    87. 				}else{
    88. 					if(tpn >= high){// 距离顶部的距离 > 子盒子隐藏的距离时，可以继续向下
    89. 						$(this).css('top','-=10px');
    90. 					}else{
    91. 						$(this).css('top',high+'px');
    92.                     }
    93.                 }
    94.             });
    95.  
    96.             var ps=$('.right p');
    97.             $('.left').on('click','li',function(){
    98.                 inx=$(this).index();
    99.                 for(var i=0;ilength;i++){
    100.                     ps[i].className='pa';
    101.                 }
    102.                 ps[inx].className='para';
    103.             })
    104.         })
    105.     script>
    106.     <div class="box">
    107.         <div class="left">
    108.            <li>铜川市li> 
    109.            <li>宝鸡市li> 
    110.            <li>西安市li> 
    111.            <li>榆林市li> 
    112.            <li>汉中市li> 
    113.            <li>延安市li>
    114.            <li>安康市li> 
    115.            <li>商洛市li> 
    116.            <li>渭南市li> 
    117.            <li>南阳市li> 
    118.            <li>郑州市li> 
    119.            <li>洛阳市li> 
    120.            <li>开封市li> 
    121.            <li>信阳市li> 
    122.         div>
    123.         <div class="right">
    124.             <div class="top">
    125.                 
    126.             div>
    127.             <div class="bottom">
    128.             <p class="para">
    129.                 铜川市，别称同官，陕西省辖地级市，地处西北地区东部、陕西中部、关中盆地和陕北高原的接交地带,属温带季风气候。全市总面积3882平方千米。截至2022年10月，铜川市辖3区1县。截至2022末，铜川市常住人口70.5万人。
    130.             p>
    131.             <p class="pa">
    132.                 宝鸡市，古称陈仓、雍城、西虢、西岐、西府等，陕西省辖地级市，是关中平原城市群副中心城市、关天经济区副中心城市，全市常住人口326.47万人。
    133.             p>
    134.             <p class="pa">
    135.                 西安市，古称长安、镐京，陕西省辖地级市，是陕西省省会、副省级市、特大城市、国家中心城市、西安都市圈以及关中平原城市群核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的科研、教育和工业基地。截至2022年末，全市下辖11个区、2个县，总面积10108平方千米，常住人口为1299.59万人，城镇人口1034.34万人，城镇化率79.59%。
    136.             p>
    137.             <p class="pa">
    138.                 榆林市，陕西省辖地级市，古称上郡，别称驼城、小北京、塞上明珠等，位于陕西省最北部，陕北地区和河套地区，黄土高原和毛乌素沙地交界处，是黄土高原与内蒙古高原的过渡区，系陕、甘、宁、蒙、晋五省区交界地，温带大陆性季风气候，总面积42920.2平方千米。截至2023年4月，榆林市下辖2个市辖区、9个县，代管1个县级市。市人民政府驻榆阳区。2022年末，榆林市常住人口361.61万人。
    139.             p>
    140.             <p class="pa">
    141.                 汉中市，简称“汉”，陕西省辖地级市，位于陕西省西南部，北与宝鸡市、西安市毗连，东与安康市接壤，南与四川省的广元市、巴中市、达州市相连，西与甘肃省陇南市相邻，区域面积27246平方千米，地处内陆东亚季风气候区内，气候温和湿润，年平均气温约14.5℃。截至2022年10月，汉中市辖2个区、9个县，另有5个经济功能区。汉中市人民政府驻地汉台区。2022年末，汉中市户籍总人口378.98万人。
    142.             p>
    143.             <p class="pa">
    144.                 延安市
    145.             p>
    146.             <p class="pa">安康市p>
    147.             <p class="pa">商洛市p>
    148.             <p class="pa">渭南市p>
    149.             <p class="pa">南阳市p>
    150.             <p class="pa">郑州市p>
    151.             <p class="pa">洛阳市p>
    152.             <p class="pa">开封市p>
    153.             <p class="pa">信阳市p>
    154.         div>
    155.         div>
    156.     div>
    157. body>
    158. html>

  • 相关阅读:
    电路的基本原理
    Vue3打包构建从webpack改为vite
    Aspose.Words使用教程之如何操作主题属性
    JDK 11统一日志管理
    CSS3DRenderer, CSS3DObject, OrthographicCamera API 结合使用案例
    苹果AR设备未来展望：硬件舒适性、软件功能与网络速度等多维度期待
    专业135总分400+西安交通大学信息与通信工程学院909/815考研经验分享
    【爬虫知识】比lxml和bs4都要好？解析器parsel的使用
    迅速上手：CentOS 系统下 SSH 服务配置指南
    任务提醒摆件HTTP服务器端功能解析
  • 原文地址：https://blog.csdn.net/m0_62836433/article/details/133689399