移动端点击导航滑动展示全部选项,以为跳转页面定位到相应位置

摘要:
根据项目的要求,在制作移动终端时,导航栏可以左右滑动,当单击某个导航时,您需要滑动到屏幕中间,并在另一个页面跳转时找到它。

项目需求,做手机端的时候导航栏可以左右滑动,并且点击某个导航的时候,需要滑动到屏幕中间,且在另一个页面跳转过来的时候定位到相应的位置。代码如下:
1.点击某个导航,需要滑动到屏幕中间
html:

<div class="top-box">
   <ul   class="active-li">
     <li   id="box1">
         <div class="img-txt1">历史</div>
         <div class="img-nav-point"></div>
     </li>
     <li   id="box2">
         <div class="img-txt1">文学</div>
         <div class="img-nav-point"></div>
     </li>
     <li   id="box3">
         <div class="img-txt1">小说</div>
         <div class="img-nav-point"></div>
     </li>
      <li   id="box4">
            <div class="img-txt1">教育</div>
            <div class="img-nav-point"></div>
      </li>
        <li   id="box5">
                   <div class="img-txt1">人文社科</div>
                   <div class="img-nav-point"></div>
               </li>
               <li   id="box6">
                   <div class="img-txt1">影音记录</div>
                   <div class="img-nav-point"></div>
               </li>       
    </ul>
 </div>

CSS样式就根据自己的样式进行编写,这里就不写了
js:

<script>
    /*点击导航*/
    $("#active-li").on("click","li",function(e){
        var moveX = $(this).position().left+$(this).parent().scrollLeft();
        var pageX = document.documentElement.clientWidth;//设备的宽度
        var blockWidth = $(this).width();
        var left = moveX-(pageX/2)+(blockWidth/2);
        $(".top-box").animate({scrollLeft:left},400);  //注意这里写的是外面盒子的class,因为我写的是外面盒子左右滚动样式
        $(this).addClass("active").siblings().removeClass("active");  //获取当前点击的元素$(this) ,并添加class;删除其他兄弟元素的样式
 });
</script>

2.由一个页面跳转另一个页面锚点控制,跳转页面后定位到相应位置

  第一个页面代码,在 a链接的后面加上 #box1
 <div class="box-bg"><a href="http://t.zoukankan.com/two.html#box1"><span>历史</span></a></div>

在第跳转的那个页面上标签上加上    这样点击的时候就能直接跳转到相应位置 不用再拖动导航栏了
 <li   id="box1">
     <div class="img-txt1">历史</div>
     <div class="img-nav-point"></div>               
 </li>

免责声明:文章转载自《移动端点击导航滑动展示全部选项,以为跳转页面定位到相应位置》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【数据结构与算法】用go语言实现数组结构及其操作DELPHI中函数、过程变量的声明与应用下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

vsCode mongoDB插件 Azure Cosmos DB

安装完成后,要重启下vsCode会看到然后点击绿色的小按钮,选择MongoDB再输入MongoDB的连接地址。当然要先把本地的mongoDB数据库打开,cmd黑窗口输入mongod--dbpathxxxx打开本地数据库输入完成地址后,回车就可以连接到自己的MongoDB数据库了...

VMP加壳(三):VMP壳爆破实战-破解某编辑类软件

同时,记住在内存视图中向VMP0段提供断点后继续单击确认按钮,以查看调用方法的位置(此处的返回地址为0x5E01E9),但此处返回push(或vm条目)。这个地方会是验证码检测的入口吗!通过字符串查找各种键提示(sn、不正确注册等)的内存:通过访问断点查找键代码,然后找出调用该函数的函数,这与JCC指令的距离更远。...

AirtestIDE基本功能(二)

文件菜单-相应工具栏上的前四个按钮:新建、打开、保存和另存为新。单击此按钮以选择是否使用创建脚本。air后缀或带有的脚本。py后缀。新脚本将初始化代码,以帮助您从API引入Airtest的各种接口,并自动初始化设备。你可以看到。air脚本文件实际上是一个公用文件夹,其中放置了通过IDE捕获的图像和运行日志。软件关闭时,布局信息将自动保存。(3) 选项-设置设...

Uni-app v-on监听事件

使用标记上的v-on监视事件。缩写为@click common click events方法:方法:{Focus(){console.log;},blur(){console.log;},confirm(){console.log;},click(){console.log;},tap(){console.log;},longpress(){console....

WPF绑定功能常用属性介绍

这是实质上是System.Windows.Data.BindingMode.OneWay绑定的一种简化形式,它在源值不更改的情况下提供更好的性能。确定依赖属性绑定在默认情况下是单向还是双向的编程方法是:使用System.Windows.DependencyProperty.GetMetadata获取属性的属性元数据,然后检查System.Windows.Fr...

安装qmake与环境变量解析

如果你已经有了qmake,可以跳过这里,请看10分钟学会使用qmake。手动安装qmake在手工连编Qt之前,下面这些环境变量必须被设置:QMAKESPEC这个必须设置为你所使用的系统的平台和编译器的组合。当编译完成时,qmake已经可以使用了。这里对添加环境变量时,是在path里头添加,还是new一个变量有点疑惑。而如果是new的话,当我们在为程序添加路径...