1. 全栈程序员必看首页

jQuery鼠标悬停3d菜单展开动画

全栈程序员-站长 • • 未分类 • 阅读 39

效果体验：http://hovertree.com/texiao/jquery/93/竖直的主菜单贴着页面左侧，当光标移入菜单项时，以3D动画的方式弹出对应的二级菜单。采用jQuery和CSS3实现。

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

效果体验：
http://hovertree.com/texiao/jquery/93/

竖直的主菜单贴着页面左侧，当光标移入菜单项时，以3D动画的方式弹出对应的二级菜单。
采用jQuery和CSS3实现。支持Chrome，火狐，Edge等浏览器。

效果图：
jQuery鼠标悬停3d菜单展开动画

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>jQuery鼠标悬停3d菜单展开动画 - 何问起</title><base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/93/css/index.css">
</head>
<body>
<div class="wrap">
    <div class="logo">
     <h1><a href="javascript:;" target="_self"><img src="http://hovertree.com/themes/hvtimages/hovertree.png"></a></h1>
    </div>
    <p>鼠标移入侧边栏，二级菜单3D展开<br/>鼠标hover背景变色<br />鼠标移入二维码背景变色</p>
    <div style="text-align:center;margin:50px 0; font-size:20px; color:#ffffff;" >
        <a href="http://hovertree.com/">何问起</a>
        <a href="http://hovertree.com/h/bjag/clwkm5fc.htm" >说明</a>
    </div>

</div>
<div class="nav-main">
<div class="nav-box">
<div class="nav">
  <ul class="nav-ul">
      <li><a href="http://hovertree.com" class="home"><span>首页</span></a></li>
      <li><a href="http://hovertree.com/h/bjaf/lxsexx3m.htm" class="develop"><span>JavaScript</span></a></li>
      <li><a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm" class="wechat"><span>ASP.NET</span></a></li>
      <li><a href="http://hovertree.com/h/bjag/hxti6to6.htm" class="case"><span>何问起键盘</span></a></li>
      <li><a href="http://hovertree.com/h/bjaf/ati6k7yk.htm" class="news"><span>HoverClock</span></a></li>
      <li><a href="http://hovertree.com/about/" class="contact"><span>关于何问起</span></a></li>
  </ul>
</div>
<div class="nav-slide">
    <div class="nav-slide-o"></div>
    <div class="nav-slide-o">
        <ul>
            <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
            <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
            <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
            <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
            <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
            <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
            <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
            <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
            <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
            <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
        </ul>
    </div>
    <div class="nav-slide-o">
        <ul>
            <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
            <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
            <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
            <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
            <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
            <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
            <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
            <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
        </ul>
    </div>
    <div class="nav-slide-o">
        <ul>
            <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
            <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
            <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
            <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
            <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
            <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
            <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
            <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
            <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
        </ul>
    </div>
    <div class="nav-slide-o">
        <ul>
            <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
            <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
            <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
            <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
            <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
            <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
            <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
            <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
            <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
        </ul>
    </div>
    <div class="nav-slide-o"></div>
</div>
</div>
</div>

<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(function(){
    var thisTime;
    $('.nav-ul li').mouseleave(function(even){
            thisTime    =    setTimeout(thisMouseOut,1000);
    })

    $('.nav-ul li').mouseenter(function(){
        clearTimeout(thisTime);
        var thisUB    =    $('.nav-ul li').index($(this));
        if($.trim($('.nav-slide-o').eq(thisUB).html()) != "")
        {
            $('.nav-slide').addClass('hover');
            $('.nav-slide-o').hide();
            $('.nav-slide-o').eq(thisUB).show();
        }
        else{
            $('.nav-slide').removeClass('hover');
        }
        
    })
    
    function thisMouseOut(){
        $('.nav-slide').removeClass('hover');
    }
     
    $('.nav-slide').mouseenter(function(){
        clearTimeout(thisTime);
        $('.nav-slide').addClass('hover');
    })
    $('.nav-slide').mouseleave(function(){
        $('.nav-slide').removeClass('hover');
    })
})
</script>
</body>
</html>

对于代码中的jQuery事件，可以使用on方法改进。参考：
http://hovertree.com/h/bjaf/ug1fikri.htm

源码下载：
http://hovertree.com/h/bjag/sdm5sdva.htm

更多特效：

http://www.cnblogs.com/roucheng/p/texiao.html

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/120269.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 字符串的方法_js字符串包含另一个字符串

    字符串的方法_js字符串包含另一个字符串

    字符串的方法_js字符串包含另一个字符串题目判断第一个字符串是否包含第二个字符串functionchange(str1,str2){if(str1===str2){returntrue}letarr1=[…str1]letarr2=[…str2]if(arr2.length>arr1.length){…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月21日
    6
  • double转BigDecimal精度丢失的解决方案。

    double转BigDecimal精度丢失的解决方案。

    double转BigDecimal精度丢失的解决方案。因为double有精度丢失的问题，所以关于小数点的计算通常使用BigDecimal来计算。但直接调用BigDecimal的构造函数，会出现精度丢失问题。publicBigDecimal(doubleval){this(val,MathContext.UNLIMITED);}例子：publicclassDemo1{publicstaticvoidmain(String[]args){//输出结果：4.7999999999999998223

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月3日
    50
  • SQLi LABS Less-5 报错注入+布尔盲注「建议收藏」

    SQLi LABS Less-5 报错注入+布尔盲注「建议收藏」

    SQLi LABS Less-5 报错注入+布尔盲注「建议收藏」sqlilabs第五关，sqli-labesless-5，sqlilabsless5

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月29日
    3
  • hql查询语句用法详解_sql add语句

    hql查询语句用法详解_sql add语句

    hql查询语句用法详解_sql add语句HQL的语法比较简单，与普通SQL的区别之处是针对对象的不同，在查询语句中将sql中的表名替换成了sql中的持久化类名，因为hibernate机制是基于对象进行查询的。 不带参数的查询，语句是“fromPOJO”的形式，其中POJO即为持久化类名称Queryquery=session.createQuery("fromUser");带参数的查询接口Query提供了…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月29日
    2
  • Django（67）drf搜索过滤和排序过滤

    Django（67）drf搜索过滤和排序过滤

    Django（67）drf搜索过滤和排序过滤前言当我们需要对后台的数据进行过滤的时候，drf有两种，搜索过滤和排序过滤。搜索过滤：比如我们想返回sex=1的，那么我们就可以从所有数据中进行筛选排序过滤：比如我们想对价格进行升序排列，就可以

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月30日
    8
  • Origin2018安装与使用（整理中）

    Origin2018安装与使用（整理中）

    Origin2018安装与使用（整理中）文章目录1.origin下载安装2.绘图前的一些必要设置3.折线图4.绘制双Y轴图1.origin下载安装Origin2018(32/64位)下载地址：链接：https://pan.baidu.com/s/1tgLxqeLoBp5DuL-hqlUDsg密码：v46x安装教程：https://jingyan.baidu.com/article/454316abde29f5f7a6c03a69.html2.绘图前的一些必要设置Origin绘图前的一些必要设置及了解1.项目管理器、对象

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月12日
    70

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号