精华内容
下载资源
问答
  • 闲来无事用css和jQuery写了个导航效果(可放开注释移除jQuery操作部分) html 部分 <ul id='ul_all'> <!-- <li class="active">首页</li> <li>首页1</li> <li>首页2</...

    闲来无事用css和jQuery写了个导航效果(可放开注释移除jQuery操作部分)如下效果:
    在这里插入图片描述

    html 部分
    <ul id='ul_all'>
    <!-- <li class="active">首页</li>
         <li>首页1</li>
         <li>首页2</li>
         <li>首页3</li>
         <li>首页4</li>
         <li>首页5</li>
         <li class="more">
             更多
             <div class="more_all">
                 <dl>
                     <dd>首页6</dd>
                     <dd>首页7</dd>
                     <dd>首页8</dd>
                     <dd>首页9</dd>
                 </dl>
             </div>
         </li> -->
    </ul>
    
    css 部分
    <style>
       ul,dl,dd{margin: 0;padding: 0;}
       #ul_all{display: flex;}
       li{list-style: none;width: 100px;padding: 10px 0;text-align: center;margin: 0;position: relative;}
       li::before {
           content: "";
           position: absolute;
           top: 0;
           left: 100%;
           width: 0;
           height: 100%;
           /* 内边线 */
           box-sizing: border-box;
           border-bottom: 2px solid #000;
           /* 过滤动画 */
           transition: 0.2s all linear;
       }
       li:hover::before {width: 100%;left: 0;}
       li:hover ~ li::before {left: 0;}
       #ul_all>.active{border-bottom: 2px solid #000;}
       .active::before{border:none;}/*,.more:before*/
    
       /* 更多 */
       /* .more{border:2px solid #fff;} */
       .more_all{position: absolute;display: none;padding: 10px 0;}
       .more_all dl{border: 1px solid #999;}
       .more_all dd{padding: 5px 25px;}
       /* .more:hover::before{border: none;} */
       .more:hover .more_all{display: block;top:41px;}
       .more_all .active{color:red;}
    </style>
    
    js 部分
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function(){
            // 点击切换同时清掉鼠标移入选中类
            $("#ul_all").on("click","li",function(){
                $(this).addClass('active').siblings().removeClass('active');
                $(this).siblings().find('dd').removeClass('active');
            });
            // 隐藏部分点击
            $("#ul_all").on("click","dd",function(){
                $(this).addClass('active').siblings().removeClass('active');
            });
    
            get_data_list();
        });
    
        function get_data_list(){
            var html_z = '',html='<li class="active">首页</li>';
            var list = ['测试1','测试2','测试3','测试4','测试5','测试6','测试7'];
            $.each(list,function(i,d){
                if(i < 4){
                    html += '<li>'+ d + '</li>';
                }else{
                    html_z += '<dd>'+ d + '</dd>';
                }
            });
    
            // 更多
            var more = '<li class="more">更多<div class="more_all">'+
                '<dl>'+ html_z +'</dl>'+
                '</div></li>';
    
            $("#ul_all").html(html + more);
        }
    </script>
    
    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <... transiti
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
    展开全文
  • 本文实例讲述了微信小程序实现slideUp、slideDown滑动效果点击空白隐藏功能。分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY() ...
  • 【温馨提示】源码包解压密码:www.youhutong.com效果图:描述说明:共4种CSS3手机侧边导航栏滑动隐藏特效1、默认的点击滑动侧边栏菜单效果。2、带3D transforms的滑动侧边栏效果。3、文字缩放和淡入淡出效果滑动侧...

    【温馨提示】源码包解压密码:www.youhutong.com

    效果图:

    fcf84aa164de8ccbcff24e25876c29eb.gif

    描述说明:

    共4种CSS3手机侧边导航栏滑动隐藏特效

    1、默认的点击滑动侧边栏菜单效果。

    2、带3D transforms的滑动侧边栏效果。

    3、文字缩放和淡入淡出效果的滑动侧边栏。

    4、使用translate来实现滑动侧边栏的效果。

    HTML

    所有滑动侧边栏效果都是使用无序列表来制作的,在默认的实现中,将无序列表包装到class为mobile的div中,为了便于控制,外围还添加了一个wrapper包裹div。这个DEMO使用纯CSS制作,按钮使用的是一个checkbox输入框来制作。插件中使用了font-awesome图标字体

    Off Canvas Menu with Animated Links

    • Tasks

    • Messages

    • New Post

    • Settings

    • Starred

    • Logout

    Click Me

    CSS样式

    整个包裹div被设置为相对定位,并为其设置左浮动和阴影效果。.mobile {

    float: left; position: relative;

    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);

    overflow: hidden;

    }

    这里的按钮制作使用了一个小技巧。作为按钮的checkbox被设置为隐藏状态,然后在元素使用一个元素来和它关联,将制作为按钮样式,实际在点击时,相当于点击了checkbox按钮。/*Hiding the checkbox*/

    #tm {

    display: none;

    }

    .mobile section label {

    color: white;

    font: bold 14px Montserrat;

    text - align: center;

    border: 2px solid white;

    border - radius: 4px;

    display: block;

    padding: 10px 0;

    width: 60 % ;

    position: absolute;

    left: 20 % ;

    top: 100px;

    cursor: pointer;

    text - transform: uppercase;

    }

    按钮的点击使用了checkbox hack 技术。/*Animate content area to the right*/

    #tm:checked ~ section {transform: translateX(150px);}

    /*Animate links from right to left + fade in effect*/

    #tm:checked ~ .sidenav b {opacity: 1; transform: translateX(0);}

    最后,为每个滑动侧边栏菜单项添加一些延迟来制作一个接一个出现的效果:#tm:checked ~ .sidenav li:nth-child(1) b {transition-delay: 0.08s;}

    #tm:checked ~ .sidenav li:nth-child(2) b {transition-delay: 0.16s;}

    #tm:checked ~ .sidenav li:nth-child(3) b {transition-delay: 0.24s;}

    #tm:checked ~ .sidenav li:nth-child(4) b {transition-delay: 0.32s;}

    #tm:checked ~ .sidenav li:nth-child(5) b {transition-delay: 0.40s;}

    #tm:checked ~ .sidenav li:nth-child(6) b {transition-delay: 0.48s;}

    浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!

    【温馨提示】源码包解压密码:www.youhutong.com

    郑重声明:

    1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除

    2、本站大多资源来源于互联网、用户分享,仅供学习交流使用,本站不提供任何技术支持

    3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。

    4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意

    展开全文
  • //父级标签 .style-banner { height: 1.... } // 火狐浏览器 隐藏滚动条 IE浏览器 隐藏滚动条 ul { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; } html 结构 "style-banner"> 随手留下.方便以后
    	//父级标签
       .style-banner {
          height: 1.2333rem;
          background: crimson;
          ul {
            width: auto;
            height: 100%;
            overflow-x: auto;
            white-space: nowrap;
            > li {
              display: inline-block;
              height: 100%;
              width: 2.9125rem;
              background: salmon;
            }
          }
          // 谷歌浏览器 隐藏滚动条
          ul::-webkit-scrollbar {
            display: none;
          }
          // 火狐浏览器 隐藏滚动条 IE浏览器 隐藏滚动条
          ul {
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;
          }
    
    html 结构
            <div class="style-banner">
              <ul>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
    

    随手留下.方便以后

    展开全文
  • /p>PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...循环滚动信息栏body {margin: 0px;padding: 0px;}#express li {height: 25px;border-bottom: dashe...
  • 这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是:默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果滑动侧边栏以及使用translate来...
  • 这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是:默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果滑动侧边栏以及使用translate来...
  • HTML+CSS/CSS3实现滑动下拉导航栏

    千次阅读 2020-05-19 00:25:16
    css实现的滑动下拉导航栏,超详细代码,以及实现中遇到的小问题 首先创建一个列表以及一些标签的全局样式 html代码 <div class="nav"> <ul> <li><a href="">一级目录</a><...
  • 主要使用CSS3的@keyframe规则实现滑动隐藏和出现的效果 1234567<div class="clock-container clock-container-show">        <div class="clock-icon"> ...
  • 本例子基于bootstraps的栅格 首先页面利用栅格分为十二等分(宽度)...加入button按钮,点击它使第三部分显示,第一部分隐藏。 代码如下 script type="text/javascript"> function shwoOrHidden(){ if(document
  • css3点击按钮左侧菜单收缩展出滑动特效
  • 显示隐藏效果 show()、hide()、toggle() show()显示效果 show([speed,[easing],[fn]]) 参数可以全部省略,无动画直接显示。 speed:三种预定速度(“slow”,“normal”,“fast”)或者表示动画时常的毫秒数值(如:...
  • 在很多场合,导航栏的背景是一个图案,字体也不再是单调的宋体,这就需要我们把导航栏的整体效果做图在网页中使用。由于网页字体的限制,以及对导航栏美观的需求,...今天我们就来做一个简单的的滑动导航栏效果(不知
  • 点击按钮向左侧滑动效果

    千次阅读 2017-12-27 15:19:47
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &...向左侧滑动效果&lt;/title&gt; &lt;-- 需引入手册 --&gt; &lt;script src="jquery-1.
  • 这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效。这四种效果各自是:默认的点击滑动側边栏菜单效果、带3D transforms的滑动側边栏效果、文字缩放和淡入淡出效果滑动側边栏以及使用translate来实现...
  • 利用js+css定位实现滑动盒子模型 今天要跟大家分享是利用js+css定位实现滑动盒子模型,其实这种滑动盒子模型是非常常见的,在很多网页中的banner或者是需要翻页的容器中经常会被用到。如下是最终的效果图: 如果你...
  • 点击左右箭头左右滑动效果 代码: <template> <div class="vertical-scroll-wrap"> <svg class="left-prev" v-if="showPrevIcon" @click="prevItem"> <use href="#icon-icon-active-star...
  • jquery实现隐藏的div出现时滑动效果

    千次阅读 2016-07-08 17:30:52
    会控开发过程中右侧改造需求,tab面板有多个标签,点击标签后进入到详情页面,详情页面有返回按钮,要求点击返回按钮后出现滑动收缩效果,并且回到tab面板。 二.实现思路 将每个content的宽度设置为0px,然后在显示...
  • slideUp() 方法:通过使用滑动效果隐藏被选元素。 slideDown() 方法:通过使用滑动效果,显示隐藏的被选元素。 children() 方法:返回被选元素的所有直接子元素。 next() 方法:获得匹配元素集合中每个元素紧邻...
  • CSS中的滑动门技术

    2007-06-01 20:34:00
    CSS中的滑动门技术作者:nobita 2005-5-8 9:39:31ISSN: 1534-0295. 20 October 2003 – Issue No. 160原文作者:Douglas Bowman 原文出自:A List Apart 中文翻译:54player.com nobita 版权说明:本文中文翻译版权...
  • 使用 HTML & CSS 制作左侧滑动导航条

    千次阅读 2020-05-20 23:35:43
    CSS 制作左侧滑动导航条 原视频连接 HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slide Menu Bar</title> <link rel="stylesheet...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,250
精华内容 4,500
关键字:

css点击隐藏滑动效果