JQUERY案例

最新推荐文章于 2024-07-30 03:35:05 发布

赤焰梦

最新推荐文章于 2024-07-30 03:35:05 发布

阅读量1.3k

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/m0_49442965/article/details/128752266

版权

本文介绍了JQUERY在实际中的应用，包括电梯导航、返回顶部、尺寸位置操作、购物车功能、全选操作以及each方法的使用，展示了JQUERY在DOM操作上的便利性。

摘要由CSDN通过智能技术生成

电梯导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入文件 -->
    <script src="index.js"></script>
    <script src="jQuery.min.js"></script>
</head>
<style>
    *{
     
        list-style: none;
        padding:0;
        margin:0;
    }
.w{
     
width: 500px;
/* height: 1000px; */
margin:0 auto;
background: #fff;
}
h3{
     
    font-size: 30px;
    text-align: center;
    line-height: 200px;
}
.floor{
     
    margin-bottom:100px;
}
.floor img{
     
    width: 500px;
    height: 700px;
    margin:0 auto;
}
.dianti{
     
    display: none;
    /* 不能随着页面滚动而上升，采取fixed定位 */
    position: fixed;
    top: 300px;
    left: 100px;
    height: 200px;
    width: 100px;
    background-color: #fff;

}
.dianti ul li:first-child{
     
border-top:1px solid black ;

}
.dianti ul li{
     
font-size: 14px;
overflow: hidden;
line-height: 64px;
text-align: center;
color: black;
border-bottom:1px solid black ;

cursor: pointer;
}

/* 再加一个类，提高优先级，不然字体和颜色都不会生效 */
.dianti .current{
     
    color: #fff;
    background-color: #c81623;
    font-weight: 700;
}
#recom{
     
   
    margin:0 auto;
width: 500px;
height: 200px;
background-color: #c81623;
}
.footer{
     
    width: 500px;
    height: 400px;
    background-color: #c81623;
}
.footer h3{
     
    
    font-size: 30px;
    text-align: center;
    line-height: 400px;
}
.tuijian{
     
   
    margin:0 auto;
    background-color: aqua;
    width: 500px;
    height: 300px;
}
</style>
<body>
    <div class="tuijian"></div>
    <div  id="recom"><h3>电梯导航的使用</h3></div>
    
    <div class="w">
        <div class="floor ">
            <div class="w img1"  >
                <img src="img/水蜜桃.jpg" alt="">
            </div>
        </div>
        <div class="floor">
            <div class="w img2">
                <img src="img/水蜜桃2.jpg" alt="">

            </div>
        </div>
        <div class="floor">
            <div class="w img3">
                <img src="img/水蜜桃3.jpg" alt="">

            </div>
        </div>
         <div class="floor">
            <div class="w img4">
                <img src="img/水蜜桃4.jpg" alt="">

            </div>
        </div> 
        <div class="floor">
            <div class="w img5">
                <img src="img/水蜜桃5.jpg" alt="">

            </div> 
        </div>
        <div class="footer">
            <h3>底部</h3>
        </div>
    </div>
    <!-- 电梯导航 -->
<div class="dianti">
    <ul>
       
        <li class="current">图片一</li>
        <li>图片二</li>
        <li>图片三</li>
        <li>图片四</li>
        <li>图片五</li>

       
    </ul>
</div>
</body>
<script>
    $(function() {
     
    //点击li，此时不需要执行页面滚动事件里面的li的背景选择添加current
    //节流阀 互斥锁
    var flag=true;
    //到达一定位置，自动出现
    var toolTop=$(