前端开发案例--360首页左右滑动导航

最新推荐文章于 2023-03-13 20:35:26 发布

马灿发

最新推荐文章于 2023-03-13 20:35:26 发布

阅读量1.8k

点赞数 1

分类专栏：前端案例文章标签：前端开发 jquery 导航

本文链接：https://blog.csdn.net/macanfa/article/details/51448632

版权

本文分享了如何实现360首页的左右滑动导航效果，通过CSS定位和jQuery动画处理，强调了解决jQuery动画积累问题的重要性，并提供了相关HTML、CSS和jQuery代码示例。涉及关键函数包括addClass()、removeClass()、siblings()、index()、eq()、stop()、animate()和css()。

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

废话不多说，直接分享效果图：

这里写图片描述

案例思路：

所有的li元素定位在ul的左侧（第一个除外）;
每次触发事件，为对应的导航项添加对应的样式；
判断当前导航项与前一个导航项的索引大小，进行对应的动画（使用CSS（）立即定位是重点！）；
将当前导航项索引赋值给前一索引值。

注意点：布局的实现，解决jQuery“动画积累”问题！

Jquery解决“动画积累”问题：http://blog.csdn.net/a600423444/article/details/6048205

涉及知识：addClass()、removeClass()、siblings()、index()】eq()、stop()、animate()、css()

    $("element").stop([clearQueue][,gotoEnd]);

    clearQueue：bool，代表是否要清空未执行的动画队列

    gotoEnd：bool，代表将正在执行的动画直接跳到末状态

HTML代码：

<!-- 总容器 -->
  <div class="web">
    <!-- 图片容器 -->
    <div class="con">
      <ul>
        <li style="left:0px;"><img src="images/1.png" /></li>
        <li><img src="images/2.png" /></li>
        <li><img src="images/3.png" /></li>
        <li>