移动端 滚动菜单栏练习 iscroll.js的应用实现区域滚动效果

最新推荐文章于 2022-06-16 15:11:42 发布
最新推荐文章于 2022-06-16 15:11:42 发布
阅读量194 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42039912/article/details/106087511
版权

category.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动web项目--京东分类</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/category.css">
</head>
<body>
<!--全屏容器-->
<div class="jd_layout">
    <!--顶部通栏-->
    <header class="jd_topBar">
        <a href="#" class="icon_back"></a>
        <form action="#"><input type="search" placeholder="顶部通栏"></form>
        <a href="#" class="icon_menu"></a>
    </header>
    <!--分类主体-->
    <div class="jd_main">
        <div class="jd_cateLeft">
            <ul class="">
                <li class=""><a href="javascript:;">热门推荐</a></li>
                <li class="now"><a href="javascript:;">潮流女装</a></li>
                <li class=""><a href="javascript:;">品牌男装</a></li>
                <li class=""><a href="javascript:;">内衣配饰</a></li>
                <li class=""><a href="javascript:;">家用电器</a></li>
                <li class=""><a href="javascript:;">电脑办公</a></li>
                <li class=""><a href="javascript:;">手机数码</a></li>
                <li class=""><a href="javascript:;">母婴频道</a></li>
                <li class=""><a href="javascript:;">图书</a></li>
                <li class=""><a href="javascript:;">家居家纺</a></li>
                <li class=""><a href="javascript:;">居家生活</a></li>
                <li class=""><a href="javascript:;">家具建材</a></li>
                <li class=""><a href="javascript:;">热门推荐</a></li>
                <li class=""><a href="javascript:;">潮流女装</a></li>
                <li class=""><a href="javascript:;">品牌男装</a></li>
                <li class=""><a href="javascript:;">内衣配饰</a></li>
                <li class=""><a href="javascript:;">家用电器</a></li>
                <li class=""><a href="javascript:;">电脑办公</a></li>
                <li class=""><a href="javascript:;">手机数码</a></li>
                <li class=""><a href="javascript:;">母婴频道</a></li>
                <li class=""><a href="javascript:;">图书</a></li>
                <li class=""><a href="javascript:;">家居家纺</a></li>
                <li class=""><a href="javascript:;">居家生活</a></li>
                <li class=""><a href="javascript:;">家具建材</a></li>
            </ul>
        </div>
        <div class="jd_cateRight">
            <div class="jd_cateRightBox">
                <a href="#" class="banner"><img src="images/banner_1.jpg" alt=""></a>
                <div class="hot">
                    <h3>热门分类</h3>
                    <ul class="clearFix">
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                    </ul>
                </div>
                <div class="hot">
                    <h3>热门分类</h3>
                    <ul class="clearFix">
                       <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                        <li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/common.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/category.js"></script>
</body>
</html>

category.css

.jd_layout {
    width: 100%;
    height: 100%;
}
html,body {
    height: 100%;
}
/*顶部通栏*/
.jd_topBar {
    height: 45px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    background: url("../images/header-bg.png") 0 0/1px 44px;
    position: absolute;
    top: 0;
    left: 0;
    /*background-color: pink;*/
    z-index: 1111;
}
.jd_topBar a {
    height: 44px;
    width: 40px;
    padding: 12px 10px;
    position: absolute;
    top: 0;
    /*//让背景从内容部分开始平铺*/
    /*没有被裁剪，只是不显示*/
    background-origin: content-box;
    /*让边框以外的背景不显示 默认的就是border-box*/
    /*让padding以外的背景不显示 padding-box*/
    /*让内容以外的背景不显示 content-box*/
    /*都被裁剪掉了*/
    background-clip: content-box;
}
.jd_topBar .icon_back {
    left: 0;
    background-position: -20px 0;
}
.jd_topBar .icon_menu {
    right: 0;
    background-position: -60px 0;
}
.jd_topBar form {
    width: 100%;
    padding: 0 40px;
}
.jd_topBar input {
    height: 30px;
    width: 100%;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-top: 7px;
    padding: 0 10px;
}
.jd_main {
    height: 100%;
    width: 100%;
    padding-top: 45px;
}
.jd_main .jd_cateLeft {
    background: pink;
    width: 90px;
    height: 100%;
    float: left;
    overflow: hidden;
}
.jd_cateLeft ul {
    width: 90px;
}

.jd_cateLeft ul li {
    height: 50px;
    width: 90px;
    line-height:50px;
    background: #f3f4f5;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.jd_cateLeft ul li.now {
    border-right: none;
    background-color: #fff;
}
.jd_cateLeft ul li.now a {
    color: #d8505c;
}
.jd_cateLeft ul li a{}
.jd_main .jd_cateRight {
    overflow: hidden;
    /*background: hotpink;*/
    height: 100%;
}
.jd_cateRightBox {
    padding: 0 10px;
}
.jd_cateRightBox .banner {
    width: 100%;
    display: block;
}
.jd_cateRightBox .banner img {
    width: 100%;
    display: block;
    margin-top: 10px ;
}
.jd_cateRightBox .hot {
    margin-top: 10px;
}
.jd_cateRightBox .hot h3{
    font-size: 12px;
}
.jd_cateRightBox .hot ul{
    width: 100%;
}
.jd_cateRightBox .hot ul li{
    width: 33.33%;
    float: left;
    padding-top: 5px;
}
.jd_cateRightBox .hot ul li a {
    display: block;
    width: 100%;
    text-align: center;
}
.jd_cateRightBox .hot ul li a img {
    width: 62px;
    height: 62px;
    display: block;
    margin: 0 auto;
}
.jd_cateRightBox .hot ul li a p {
    font-size: 12px;
    text-align: center;
    padding: 5px 0;
}

base.css

/*reset  css*/
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    /*移动端宽度不固定，盒子的总宽度要包括边框*/
    box-sizing: border-box;
    -webkit-border-sizing: border-box;
    /*去掉点击时高亮效果*/
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: "Microsoft YaHei",sans-serif;
    font-size: 14px;
    color: #333;

}
ul,ol {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
input,textarea {
    /*点击时去掉边框显蓝色*/
    outline: none;
    /*去掉边框，自己定义边框*/
    border: none;
    /*防止拉大*/
    resize: none;
    /*元素的外观，none没有任何样式*/
    -webkit-appearance: none;
}
/*common css*/
.f_left {
    float: left;
}
.f_right {
    float: right;
}
/*清除浮动*/
.clearFix::after,
.clearFix::before {
    content: "";
    display: block;
    visibility: hidden;
    line-height: 0;
    height: 0;
    clear: both;
}
.ml10 {
    margin-left: 10px;
}
.mr10 {
    margin-right: 10px;
}
.mt10 {
    margin-top: 10px;
}
.mc10 {
    margin-bottom: 10px;
}
/*使用精灵图的公用样式*/
[class^="icon_"],[class*="icon_"] {
    background-repeat: no-repeat;
    background-image: url("../images/sprites.png");
    -webkit-background-size: 200px 200px;
    background-size: 200px 200px;
}

category.js

window.onload=function(){
    //区域滚动效果
    //条件：
    //一个容器装着一个容器的HTML结构
    //找到大容器
    //子容器比父容器大
    new IScroll(document.querySelector(".jd_cateLeft"),{
        scrollX:false,
        scrollY:true
    });
    new IScroll(document.querySelector(".jd_cateRight"),{
        scrollX:false,
        scrollY:true
    });
};

天马行空zqzq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实例-滚动菜单
crl744156212的博客
03-23 887
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;滚动菜单&lt;/title&gt; &lt;script type="text/javascript" src=&quot
学习使用jquery iScroll.js移动端滚动条插件
10-22
移动端滚动条插件iScroll.js是一种基于jQuery的JavaScript库，专为移动设备设计，用于实现流畅的滚动效果。在本知识点中，我们将详细探讨iScroll.js的使用方法、注意事项以及其实例化步骤和参数配置。 ### iScroll....
[移动端] 小案例---左右滚动 分类页面
qq_14993591的博客
08-16 308
<!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,minimum-scale=1,maximum-scal
html js实现横向菜单,js实现水平滚动菜单导航
weixin_29290259的博客
06-16 1031
项目中用到了滚动导航，但是默认的滚动条太丑了，只好用js自己模拟了一个。凑合用可以，不算完美。希望以后有机会再来修饰一下。先来看下最终效果：最终效果先看html结构:全单1全部菜2单全部3单菜单4全菜单全部5菜单全6单全6部菜单全菜7单全8单全部5菜单全6单全6部菜单全菜7单全8单全9部菜单全10单全11部单菜2单全菜12单全32部菜单说一下，末尾我给加了阴影的效果：.root:before{di...
移动端 网易云 左右滚动导航栏
柒柒柒柒
06-16 984
移动端 网易云 左右滚动导航栏
原生撸移动端顶部滚动菜单栏，实现可滚动控制滚动边界动态样式
见贤思齐焉，见不贤内自省
11-13 1126
原生撸移动端顶部滚动菜单栏 实现的效果为： 可以自由滚动，设置滚动的左边界和有边界 html和css为 <!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
iscroll.js滚动加载实例详解
10-19
在本文中，我们将深入探讨iscroll.js，一个用于实现高性能滚动效果的JavaScript库，特别是针对滚动加载（infinite scroll）的实例。iscroll.js通过优化滚动性能，使得在移动设备和桌面浏览器上都能流畅地处理大量的...
vue中利用iscroll.js解决pc端滚动问题
10-15
在使用Vue.js框架开发前端项目时，经常会遇到需要在页面上实现...综上所述，通过自定义指令结合iScroll.js，开发者能够灵活地在Vue项目中实现各种滚动效果，无论是PC端还是移动端，都能提供更加流畅和自然的用户体验。
基于iscroll.js实现下拉刷新和上拉加载效果
10-21
iscroll.js是一个非常流行的JavaScript滚动框架，主要用于创建流畅的滚动效果，同时也支持移动端的手势操作和特殊效果。 为了使用iscroll.js实现下拉刷新和上拉加载，首先需要下载并引入iscroll.js库。这个库可以从...
scrollMenu，一款可滚动的菜单插件 兼容pc和移动端
anji4489的博客
05-10 485
这个菜单 有两种样式, 也可以通过animate.css加不同的动画效果！滚动的方式也有两种 一种为通用的overflow，另外一种是better-scroll的滚动效果 在线链接地址http://www.daiwei.org/works/UI/scrollMenu/github下载 地址 https://github.com/IFmiss/scrollMenu 感觉不...
js实现移动端导航点击自动滑动效果
12-12
本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码，供大家参考，具体内容如下 移动端模拟导航可点击自动滑动 0.1.4。 导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】。 废话不多说直接上代码： /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】 */ (function ($) { $.fn.navbarscroll = function (options) { //各
用jquery写的菜单从左往右滑动出现
10-26
主要介绍了用jquery写的菜单从左往右滑动出现的效果,需要的朋友可以参考下
移动端触屏滑动导航菜单
09-15
移动端触屏滑动导航菜单
Javascript实现页面滚动时导航智能定位
10-19
本篇文章主要介绍了Javascript实现页面滚动时导航智能定位，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
滚屏导航条html,jQuery整页全屏滚动导航按钮特效插件
weixin_39950824的博客
06-09 273
ScrollMenu是一款非常实用的jQuery整页全屏滚动导航按钮特效插件。通过ScrollMenu可以将导航按钮设置为垂直或水平的导航条，并可以带预览图。当点击一个导航按钮时，页面以整页全屏滚动的方式平滑过渡。使用方法使用该全屏翻页导航按钮插件需要引入jQuery(1.7+)和scrollmenu.css以及scrollmenu.js文件。HTML结构页面基本的HTML结构如下：初始化插件在页...
js 可以左右滑动的导航栏 以及 展示对应页面
qq_39835505的博客
04-11 2998
嘿嘿，刚做好的，展示给大家，我也是参考别人做的 参考网址 https://blog.csdn.net/fengtingYan/article/details/87446652 主要做的这个，因为代码少 https://blog.csdn.net/Gaia_qi/article/details/79528832 https://blog.csdn.net/qq_33563147/artic...
原生js实现手机端导航滑动效果
weixin_34414650的博客
11-20 1140
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-sca...
移动端布局 + iscroll.js
weixin_30517001的博客
09-15 59
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,min...
iScroll5中文API详解：高性能滚动插件
iScroll5不仅提供基本的滚动功能，还能实现缩放、平移、无限滚动、视差滚动和旋转等交互效果，所有这些只需引入大约4kb的代码库。 ### iScroll5的核心特性： 1. **高性能**：iScroll通过持续优化，确保在各种新旧...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值