使用jq实现电商网站‘楼梯效果’的渲染

最新推荐文章于 2020-09-25 08:43:20 发布
最新推荐文章于 2020-09-25 08:43:20 发布
阅读量338 收藏 2
点赞数
分类专栏： jq 文章标签： jquery 楼梯效果 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangtianqiboke/article/details/92073909
版权

分享一个关于楼梯效果的练习 ：

实现功能的方法：

 

关键在于滑动时获取对应li索引 index() animate()的方法 获取索引时 需要用到scrollTop() outHeight()，offset()方法

和jq的动画效果fadeIn() ,fadeOut()的方法，完成楼梯效果的渲染。

最后的完善：此时楼梯效果点击li滑动到对应楼层是 会有页面会有动画滑动的效果，不够完善。

此时定一个变量flag来监听如果为true 执行侧边列表显示的代码，给侧边li加点击事件时，flag为FALSE

实现页面滚动代码时另其变为true。

  1. 首先获取鼠标滑动的距离，滑动之后获取目标li的对应的索引，给对应的li添加类名 使用animate()方法是页面滚动到对应的li。
  2. 给li添加点击事件，（出去最后一个li）使用animate()
  3. 给最后一个li添加事件 使用animate()页面回到顶部。

实例展示 ：

css样式 

<style type="text/css">

        body,

        ul,

        li {

            padding: 0;

            margin: 0;

        }

 

        li {

            list-style: none;

        }

 

        #floorNav {

            /* display: none; */

            position: fixed;

            top: 100px;

            left: 50px;

            width: 32px;

            border: 1px solid #CECECE;

        }

 

        #floorNav li {

            position: relative;

            width: 32px;

            height: 32px;

            border-bottom: 1px solid #CECECE;

            text-align: center;

            line-height: 32px;

            font-size: 12px;

        }

 

        #floorNav span {

            display: none;

            position: absolute;

            top: 0;

            left: 0;

            width: 32px;

            height: 32px;

            background: red;

            color: white;

        }

 

        #floorNav li:hover span,

        #floorNav li.hover span {

            display: block;

        }

 

        #floorNav li:last-child {

            background: red;

            color: white;

            border-bottom: none;

        }

 

        #header,

        #footer {

            width: 1000px;

            height: 1000px;

            background: darkgoldenrod;

            margin: 0 auto;

        }

 

        #content {}

 

        #content li {

            width: 1000px;

            height: 600px;

            margin: 0 auto;

            font-size: 40px;

            text-align: center;

            line-height: 600px;

        }

    </style>

<body>

    <div id="floorNav">

        <ul>

            <li>1F<span>服饰</span></li>

            <li>2F<span>美妆</span></li>

            <li>3F<span>手机</span></li>

            <li>4F<span>家电</span></li>

            <li>5F<span>数码</span></li>

            <li>6F<span>运动</span></li>

            <li>7F<span>居家</span></li>

            <li>8F<span>母婴</span></li>

            <li>9F<span>食品</span></li>

            <li>10F<span>图书</span></li>

            <li>11F<span>服务</span></li>

            <li>TOP</li>

        </ul>

    </div>

    <div id="header"></div>

    <div id="content">

        <ul>

            <li style="background: #8B0000;">服饰</li>

            <li style="background: #123;">美妆</li>

            <li style="background: #667;">手机</li>

            <li style="background: #558;">家电</li>

            <li style="background: #900;">数码</li>

            <li style="background: #456;">运动</li>

            <li style="background: #789;">居家</li>

            <li style="background: #234;">母婴</li>

            <li style="background: #567;">食品</li>

            <li style="background: #887;">图书</li>

            <li style="background: #980;">服务</li>

        </ul>

    </div>

    <div id="footer"></div>

    <script>

        $(function () {

            var flag = true;

            $(window).scroll(function () {

                if (flag) {

                    var st = $(this).scrollTop();//鼠标滑动距离

                   //滑动距离大于300 显示侧边列表

                    if (st > 300) {

                        $("#floorNav").fadeIn();

                    } else {

                        $("#floorNav").fadeOut();

                    }

                       //遍历li 滑动距离大于li 获取匹配元素在当前视口的相对偏移高度-获取第一个匹配元素外部高度（默认包括补白和                  //边框）的一半。取得该元素的索引.

                    $("#content li").each(function () {

                        if (st >= $(this).offset().top - $(this).outerHeight() / 2) {

                            var index = $(this).index();

                     //获取该元素的索引并添加类名，其他兄弟元素移出类名

                            $("#floorNav li").eq(index).addClass("hover").siblings().removeClass("hover");

                        }

                    })

 

                }

            })

           //排除最后一个li 添加点击事件 先获取索引 添加类名移出兄弟元素类名 

            $("#floorNav li:not(:last)").click(function () {

                flag = false;

                var index = $(this).index();

                $(this).addClass("hover").siblings().removeClass("hover");

              //页面滚动到对应li标签对应位置 

                $("body,html").animate({ "scrollTop": $("#content li").eq(index).offset().top }, 200, function () {

                    flag = true;

                });

            });

                //给侧边列表最后一个li  添加点击事件 页面滚动到最上面

            $("#floorNav li:last").click(function () {

                $("body,html").animate({ "scrollTop": 0 }, 200);

 

            })

        })

    </script>

</body>

 

wangtianqiboke
关注
专栏目录
使用jq实现电商网站“楼梯”效果制作（左侧显示楼层号、显示对应楼层信息）
ZHANGJIN9546的博客
06-28 799
使用jq实现电商网站“楼梯”效果制作 思路 ： 1、点击左侧的楼层号 显示对应的楼层信息 操作当前点击的楼层号的高亮显示 点击不同楼层号 设置页面滚走的距离 为当前楼层距离内容窗口的top值 2、点击 top 回到顶部 3、操作滚动条显示对应的楼层号 4、技术点：滚动条的获取、页面滚走的距离、jq操作样式、对应下标显示楼层内容（在代码中我都会详细注释） //代码分享 <!DOCTYP...
jQuery实现楼梯
sdfujichao的博客
06-07 1207
用jQuery找到文档中的相应的div的top值，在赋值就可以实现楼梯效果了 #wra div{ width: 1028px; height: 726px; text-align: center; font-size: 100PX; line-height:726px; } #wra #div1{ ba
jq简单爬楼效果
weixin_30394251的博客
04-23 138
原理是： 1，先each循环，获取到每个元素距离文档顶部的距离 2，然后用window的scroll事件获取元素中滚动条的垂直偏移 3，然后把俩者进行比较 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> ...
jquery实现仿京东楼梯效果（比较全面的）
09-08
里面有index2.和index4两个效果是一样的只不过我用了两种不同的写法。 一个不用管点击效果直接通过锚点连接到导航的那个部分，一个是写了一个点击函数让他跳转过去。 我们需要记住点击也会触发滚动。他可能执行两个函数，所以选中的状态加个样式只在一个里面写，在滚动时写。
html 楼梯效果
胡世林的博客
04-20 2440
下面是在jd看到的，觉得挺好玩的，就学习了，百度很久，才发现叫楼梯效果 代码：                                             * {                 margin: 0;                 padding: 0;                 border: 0;             
html+jq 前端小白电商网站demo
01-30
在电商网站Demo中，`jquery.js`或者`script.js`等文件可能会处理用户交互，如点击事件、滑动效果、表单验证等，同时，JQ也可能用于动态加载数据、实现商品轮播图、添加至购物车等实用功能。 `images`目录存放着网站...
电商经典JQ效果焦点
08-02
总的来说，"电商经典JQ效果焦点"是一个集实用性、美观性、稳定性和兼容性于一体的jQuery插件，对于电商网站的首页设计、商品展示区或者广告轮播等场景非常适用。通过理解和应用这些技术，开发者能够为用户提供更优质...
jQuery电商网站常用商品分类导航菜单代码
06-05
在构建电商网站时，商品分类导航菜单是必不可少的元素，它能帮助用户快速找到他们感兴趣的商品。本资源提供了一款适用于jQuery的电商网站商品分类导航菜单代码，特别强调了对IE8浏览器的兼容性，这对于那些仍需支持...
jq实现上下滑动效果
10-01
在网页开发中，jQuery（通常简称为jq）是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。本篇文章将详细讲解如何使用jQuery实现页面的上下滑动效果，这种效果在移动设备和桌面端的应用中都非常...
电子商务-jquery
weixin_45901646的博客
08-13 118
层级选择器 选择给定的祖先元素的所有后代元素 $(“祖先元素 指定的后代元素”) 选择给定的父元素的所有子代元素 $(“父元素>子元素”) 选择给定的元素的下一个兄弟节点 $(“元素 +下一个兄弟节点”) 选择给定的元素后的所有兄弟节点 $(“元素 ~ 下边所有兄弟节点”) 层级选择器 重点在于符号： 空格(后代) ›(子元素) +(下一个兄弟节点) ~(下边所有兄弟节点) 表单选择器 :input 选择所有 input, textarea, select 和 button 元素 :text 选择所有
电商页面放大镜插件
02-15
jq插件，直接套用
jquery搭建电商管理平台项目--笔记
wuzhaoqing325的博客
03-05 718
第一章 课程介绍与开发前的准备工作 第二章 开发环境搭建与开发工具使用技巧 第三章 项目初始化与基于模块化的脚手架搭建 第四章 项目通用功能开发 第五章 用户模块开发 第六章 商品模块开发 第七章 购物车模块开发 第八章 订单模块开发 第九章 支付模块开发 第十章 数据统计和SEO优化 第十一章 后台管理系统介绍 第十二章 项目线上部署与自动化发布 第十三章 总结与展望 通用部分 footer:底...
教你用jquery实现网页的楼梯效果
qq_41383900的博客
04-06 766
教你用jquery实现网页的楼梯效果 在各大电商网站中经常看到如图所示右边的楼梯效果，当我们滚动页面滚动道不同的分栏的时候，右边的提示框相应的也会发生变化，并且点击提示框上的不同按钮，可以跳转到对应的节点。这个功能怎么实现的呢？ 1.页面布局 写出几个大的色块表示每一个模块，增加一个ul作为右边的提示框 <div class="top"> </div> &...
jquery实现楼梯效果
sunflower_li的博客
03-16 3549
在首页页面内容较长时为了更好的用户体验需要用到楼层，用来提示用户在哪一层，楼层显示当前楼层的名字，点击楼层可回到所对应的楼层，完整代码如下         Title                 $(function () {             var arr = ['服饰','衣帽','家电','运动','美妆'];             var ar
jquery实现电商网站分类导航菜单
MySunshine07的博客
07-23 3217
一、HTML部分 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt
jquery完成一个电商网站的放大镜效果以及原理
lanseguhui的博客
08-06 1176
  鼠标拖动遮盖运动,右边大图随之移动,类似于淘宝中的放大镜效果 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt;
爬楼梯 js算法
liangyiyiliang的专栏
04-22 2227
原题：假设你现在正在爬楼梯，楼梯有n级。每次你只能爬1级或者2级，那么你有多少种方法爬到楼梯的顶部？ 闲话不多说，上代码 var sumMethod = 0; var floorSum = 4; function jisuanFloor(floorsum) { if (floorsum == 0 || floorsum == 1) { sumMethod++;
js楼梯效果
starry__sty的博客
09-25 2029
楼梯效果 具体代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #warp{ width: 800px; margin: 0 auto; } .box{
用户列表界面制作(1)（电商项目开发）
qq_44732811的博客
03-30 741
一、用户列表 1.新建user.jsp、在WebContent中放入bootstrap的文件 2.在user.jsp引入jquery、bootstrap 代码 3.引入jstl的C标签（展示列表会用到c:foreach） 代码 <%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core”%> <c:se...
JQ实现简单的拼图效果
最新发布
06-03
以下是使用jQuery实现简单的拼图效果的示例代码： HTML代码： ```html <div id="puzzle"> <div class="piece" id="piece1"></div> <div class="piece" id="piece2"></div> <div class="piece" id="piece3"></div> <div class="piece" id="piece4"></div> <div class="piece" id="piece5"></div> <div class="piece" id="piece6"></div> <div class="piece" id="piece7"></div> <div class="piece" id="piece8"></div> <div class="piece" id="piece9"></div> </div> ``` CSS代码： ```css #puzzle { width: 300px; height: 300px; border: 1px solid #000; position: relative; } .piece { width: 100px; height: 100px; border: 1px solid #000; background-image: url('path/to/image.jpg'); background-size: 300px 300px; position: absolute; } #piece1 { top: 0; left: 0; } #piece2 { top: 0; left: 100px; } #piece3 { top: 0; left: 200px; } #piece4 { top: 100px; left: 0; } #piece5 { top: 100px; left: 100px; } #piece6 { top: 100px; left: 200px; } #piece7 { top: 200px; left: 0; } #piece8 { top: 200px; left: 100px; } #piece9 { top: 200px; left: 200px; } ``` jQuery代码： ```javascript $(document).ready(function() { var emptyPiece = $('#piece9'); // 空白拼图块 var pieces = $('.piece'); // 所有的拼图块 // 随机打乱拼图块的位置 pieces.sort(function() { return Math.random() - 0.5; }); // 设置每个拼图块的位置 pieces.each(function(index) { var piece = $(this); var top = Math.floor(index / 3) * 100; var left = (index % 3) * 100; piece.css({ top: top + 'px', left: left + 'px' }); // 点击拼图块时进行交换 piece.click(function() { var currentTop = parseInt(piece.css('top')); var currentLeft = parseInt(piece.css('left')); // 判断是否与空白拼图块相邻 if ((currentTop === emptyPiece.position().top && Math.abs(currentLeft - emptyPiece.position().left) === 100) || (currentLeft === emptyPiece.position().left && Math.abs(currentTop - emptyPiece.position().top) === 100)) { var tempTop = piece.css('top'); var tempLeft = piece.css('left'); piece.css({ top: emptyPiece.css('top'), left: emptyPiece.css('left') }); emptyPiece.css({ top: tempTop, left: tempLeft }); } }); }); }); ``` 在上面的示例代码中，我们首先定义了一个包含9个拼图块的容器，并使用CSS设置了每个拼图块的位置。然后在jQuery代码中，我们将所有的拼图块随机打乱位置，并为每个拼图块绑定了一个点击事件，在点击拼图块时进行交换。交换拼图块时，我们使用了jQuery的css()方法来修改每个拼图块的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值