3.案例侧栏.zip

  • ximota
    了解作者
  • HTML
    开发工具
  • 1KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 0
    下载次数
  • 2021-03-02 21:03
    上传日期
侧栏,侧栏导航,用div定义一个容器,在这个容器放若干个a标签禁止跳转,实现放上去可以动画出所有导航栏。
3.案例侧栏.zip
  • css
  • style.css
    884B
  • index.html
    2.1KB
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="rightNav"> <a href="#content" style="right: -110px;" rel='nofollow' onclick='return false;'><em>^</em>回到顶部</a> <a href="#effect1" style="right: -110px;" rel='nofollow' onclick='return false;'><em>1</em>书签切换</a> <a href="#effect2" style="right: -110px;" rel='nofollow' onclick='return false;'><em>2</em>幻灯片</a> <a href="#effect3" style="right: -110px;" rel='nofollow' onclick='return false;'><em>3</em>图片滚动-左</a> <a href="#effect4" style="right: -110px;" rel='nofollow' onclick='return false;'><em>4</em>图片滚动-上</a> <a href="#effect5" style="right: -110px;" rel='nofollow' onclick='return false;'><em>5</em>图片无缝滚动-左</a> <a href="#effect6" style="right: -110px;" rel='nofollow' onclick='return false;'><em>6</em>图片无缝滚动-上</a> <a href="#effect7" style="right: -110px;" rel='nofollow' onclick='return false;'><em>7</em>文字滚动-左</a> <a href="#effect8" style="right: -110px;" rel='nofollow' onclick='return false;'><em>8</em>文字滚动-上</a> <a href="#effect9" style="right: -110px;" rel='nofollow' onclick='return false;'><em>9</em>文字无缝滚动-左</a> <a href="#effect10" style="right: -110px;" rel='nofollow' onclick='return false;'><em>10</em>文字无缝滚动-上</a> <a class="new" href="#effect11" style="right: -110px;" rel='nofollow' onclick='return false;'><em>11</em>常用导航 [v2.1]</a> <a class="new" href="#effect12" style="right: -110px;" rel='nofollow' onclick='return false;'><em>12</em>手风琴 [v2.1]</a> <a href="#effectT1" style="right: -110px;" rel='nofollow' onclick='return false;'><em>T1</em>其它基础效果</a> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> //右侧导航 var btb=$(".rightNav"); var tempS; $(".rightNav").hover(function(){ var thisObj = $(this); tempS = setTimeout(function(){ thisObj.find("a").each(function(i){ var tA=$(this); setTimeout(function(){ tA.animate({right:"0"},200);},50*i); }); },200); },function(){ if(tempS){ clearTimeout(tempS); } $(this).find("a").each(function(i){ var tA=$(this); setTimeout(function(){ tA.animate({right:"-110"},200,function(){ });},50*i); }); }); </script> </body> </html>
评论
    相关推荐
    • 侧栏导航.zip
      侧栏导航功能,可以方便植入各种页面,常见的导航功能。
    • IOS左右侧栏
      IOS左右侧栏的展开实现,带手势以及缩放效果。
    • 侧栏弹出导航栏
      仿酒仙网的一款jQuery侧栏弹出导航栏特效 
    • iOS侧栏菜单 SlideMenuCon
      iOS侧栏菜单 SlideMenuControllerOC ,iOS侧栏菜单,一个类似于iQON, Feedly, Google , Ameba 等App的侧栏菜...
    • windows侧栏风格
      来自codeproject的代码,质量很高。分享一下,共同学习进步
    • 京东新版侧栏jquery导航
      想要简单的、快速的做导航条,直接下载,自己稍微改动就可以了
    • 实现侧栏菜单效果
      源码ENSwiftSideMenu,ENSwiftSideMenu用Swift编程语言实现侧栏效果。可以通过点击实现侧栏的弹出和关闭。可以通过手势实现侧栏的滑出和关闭。
    • 可滑动侧栏
      JASidePanels is a UIViewController container designed for presenting a center panel with revealable side panels - one to the left and one to the right. The main inspiration for this project is the ...
    • airbnb侧栏动画效果
      这个源码是一个airbnb侧栏动画效果源码案例,源码what,边栏效果,请大家可以各位自行拓展的,也是一个非常方便的一个案例,希望大家能够喜欢。
    • googlemap(demo).rar
      javascript操作GOOGLEMAP地图所有演示程序