jQuery电商网站楼层滚动定位

访客4年前 (2021-02-04)黑客资讯1169

转载于前端网

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery电商网站楼层滚动定位</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        i{font-style: normal;}
        ul,li,dl,ol{list-style: none;}
        #LoutiNav{ border: 1px solid gray; width: 30px; position: fixed; top: 150px; left: 50px; display: none;}
        #LoutiNav li{ width: 30px; height: 30px;border-bottom: 1px solid gray; line-height: 30px; text-align: center; cursor: pointer;}
        #LoutiNav span{display: none;}
        #LoutiNav .active{background: white; color: darkred;}
        #LoutiNav li:hover span{display: block; font-size: 12px; background: darkred; color: white;}
        #LoutiNav li:hover i{display: none;}
        #goTop{width: 40px;height: 40px; line-height: 40px;text-align: center; background: gray; position: fixed;bottom: 30px; right: 30px; cursor: pointer;border-radius: 5px; display: none; }
        #goTop:hover{background: darkred; color: white;}
        #goTop:hover span{display: block;}
        #header{height: 200px; background: palegoldenrod; text-align: center; line-height: 200px; font-size: 72px; margin: 0 auto;}
        .louceng{ height: 810px; width: 1440;text-align: center; line-height: 800px; font-size: 120px; margin: 0 auto;}
        #erweima{width: 130px; height: 130px; background: palegreen; display: none; position: absolute; right: 46px; bottom: 5px;line-height: 130px; text-align: center; font-size: 20px; border-radius:10px ;}
       </style>
</head>
<body>
<ul id="LoutiNav" style="display: block;">
<li class="6179-8cac-db3f-e705 "><i>1F</i><span>服饰</span></li>
<li><i>2F</i><span>美妆</span></li>
<li><i>3F</i><span>手机</span></li>
<li><i>4F</i><span>家电</span></li>
<li><i>5F</i><span>数码</span></li>
<li><i>6F</i><span>运动</span></li>
<li><i>7F</i><span>居家</span></li>
<li><i>8F</i><span>母婴</span></li>
<li><i>9F</i><span>食品</span></li>
<li><i>10F</i><span>图书</span></li>
<li style="border-bottom: none;"><i>11F</i><span>服务</span></li>
</ul>
<div id="goTop" style="display: block;">
<span id="erweima">我是二维码</span>Top</div>
<div id="header">头部</div>
<div id="main">
<div style="background: papayawhip;">服饰</div>
<div style="background: peachpuff;">美妆</div>
<div style="background: peru;">手机</div>
<div style="background: pink;">家电</div>
<div style="background: palegoldenrod;">数码</div>
<div style="background: plum;">运动</div>
<div style="background: powderblue;">居家</div>
<div style="background: rosybrown;">母婴</div>
<div style="background: cornflowerblue">食品</div>
<div style="background: mediumpurple;">图书</div>
<div style="background: darkslateblue;">服务</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
           var oNav = $('#LoutiNav');//导航壳
           var aNav = oNav.find('li');//导航
           var aDiv = $('#main .louceng');//楼层
           var oTop = $('#goTop');
            //回到顶部
            $(window).scroll(function(){
                 var winH = $(window).height();//可视窗口高度
                 var iTop = $(window).scrollTop();//鼠标滚动的距离

                 if(iTop>=$('#header').height()){
                    oNav.fadeIn();
                    oTop.fadeIn();
                 //鼠标滑动式改变  
                 aDiv.each(function(){
                    if(winH+iTop - $(this).offset().top>winH/2){
                        aNav.removeClass('active');
                        aNav.eq($(this).index()).addClass('active');
                    }
                 })
                 }else{
                    oNav.fadeOut();
                    oTop.fadeOut();
                 }
            })
            //点击top回到顶部
            oTop.click(function(){
                $('body,html').animate({"scrollTop":0},500)
            })
            //点击回到当前楼层
            aNav.click(function(){
                var t = aDiv.eq($(this).index()).offset().top;
                $('body,html').animate({"scrollTop":t},500);
                $(this).addClass('active').siblings().removeClass('active');
            });
        </script>

</body>
</html>

标签: jQuery

返回列表

上一篇：吃什么东西补肾（这8类食物好吃又营养，别再犹豫了）

下一篇：win7系统不能访问网络位置怎么办

jQuery ajax请求json数据回调函数中data为undefined解决方法

首先要考虑json数据是否正确，dataType类型和返回类型是否一致今天写模板的时候用的ajax获取文章，调用标准api接口，可是总是出错，代码大概是这样的 $.ajax({ ...

jquery外链版本整理

jquery-2.1.1 (注！jquery-2.0以上版本不再支持IE 6/7/8) 百度引用地址 (推荐目前最稳定的，不会出现延时打不开情况)百度压缩版引用地址: <script src...

jq什么意思?什么是jQuery

什么是jQuery ? jQuery也就是JavaScript和Query(查询),即是辅助JavaScript开发的库。 jQuery优势： 1).轻量级 2).强大的选择器 3).出色的...

jQuery动态append添加元素点击事件失效

问题描述：在div中动态添加span米素，之后执行 $(selector).click(function(){var param = $(this).text();}) 无法触发事件。...

jq什么意思（什么是jQuery）

jQuery也就是JavaScript和Query(查询),等于帮助JavaScript开拓的库。 jQuery优势： 1).轻量级 2).强大的选择器 3).精彩的DOM操纵封装 4).靠得住的...

简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法

1.$.getJSON 　　$.getJSON()是专门为ajax获取json数据而设置的，并且支持跨域调用，其语法的格式为： $.getJSON( url, ...

找黑客平台