jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧。
这里就来讲讲如何从设计->写布局->写样式->写JS代码 完成一个完全自己设计的导航栏。
HTML写布局,CSS写样式,JS写动画效果和事件响应等,考虑到JQuery对DOM操作的便利性,这里选择用JQuery可以达到事半功倍的效果。
设计:
比如这里想要写一个导航栏,鼠标悬浮在每一章节上面,可以横向伸展出下面的每一个节点,节点的出现有一个跳跃的动作。
写布局:
要说明几点:
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。
<span>标签不会独自占一行,一般用来包裹内容。因为不是块级元素设置width、height属性无效
<a>标签当然是用来放链接的啦
写样式:
写JS:
$(selector).hover(inFunction,outFunction)
括号内第一个function必需写,规定 mouseover 事件发生时运行的函数。
第二个function可选,规定 mouseout 事件发生时运行的函数。
jQuery同样可以方便的实现动画效果,animate() 方法通过CSS样式将元素从一个状态改变为另一个状态。
CSS属性值是逐渐改变的,这样就可以创建动画效果,这里不再赘述。
因为想要节点按顺序依次出现,但又不想用animate的排队,所以我写了一个回调函数,在回调函数中写了setTimeout延时,用addClass给响应的节点加上animation动画样式。
代码:
<!--Created by CC on 2017/10/14--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>~myNav~</title><script type="text/javascript" src="jquery.js"></script><!--样式--><style type="text/css">.triangle-right {width: 0;height: 0;border-left: 20px solid #FF7800;border-bottom: 20px solid transparent;border-top:2px dotted #333333;display: inline-block;margin-top:10px;vertical-align: top;}.mynav{font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";-webkit-font-smoothing: subpixel-antialiased;margin:10px 2%;width:90%;heigth:450px;display:flex;}.nav-left{flex:auto;heigth:200px;font-size:20px;font-weight: 700;text-align: center;background-color:#505050 ;color:#FF7800;border-right:3px solid #FF7800;width:80px;padding-top:40px;}.nav-right{flex:auto;width:90%}.nav-right div{position:relative;}.cap{display:inline-block;width:70px;height:30px;background-color: #FF7800;margin:10px 0;border-bottom:2px dotted #333333;border-top:2px dotted #333333;}.child{display:inline-block;width:0px;border-top:2px dotted #333333;vertical-align: top;margin-top: 10px;}span.cap-child{position:absolute;border:2px solid #333333;background-color: #505050;color: #ffffff;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;/*top:5px;*/left:0px;}span.cap-child a{font-size:15px;color:white;}span.cap-child a:hover{color: #ffc8aa;}.hr-over{position:absolute;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background-color: #FF7800;width:20px;height:20px;margin-top:-10px;border:1px solid #333333;}.showit{animation: cho-show .5s;}@keyframes cho-show {0% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate3d(0, 0, 1, 45deg);transform: rotate3d(0, 0, 1, 45deg);opacity:0;}100% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: none;transform: none;opacity:1;}}</style>
</head>
<body>
<!--布局-->
<div class="mynav"><div class="nav-left">目<br/>录<br><span style="font-size:6px">by cc</span></div><div class="nav-right" ><div ><span class="cap ">Chapter1</span><div class="triangle-right"></div><div class="child"></div></div><div ><span class="cap">Chapter2</span><div class="triangle-right"></div><div class="child"></div></div><div ><span class="cap">Chapter3</span><div class="triangle-right"></div><div class="child"></div></div></div>
</div><script type="text/javascript">var active='';var space=80;var myNodes =[{ name:'Chapter1',children: [{name:'字符集',url:'https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E9%9B%86/946585?fr=aladdin'},{name:'注释',url:'cc/sd1/index'},{name:'直接量',url:'cc/sd2/index'}]},{name:'Chapter2',children:[{name:'数字',url:'#'},{name:'文本',url:'#'},{name:'布尔值',url:'#'},{name:'全局对象',url:'#'},{name:'包装对象',url:'#'}]},{name:'Chapter3',children: [{name:'猫猫',url:'#'},{name:'狗狗',url:'#'}]}];$('.cap').hover(function(){var cap=this;var mybox=$(cap.parentNode).find('.child');if(active!=this.innerHTML){//变色$(cap).css('background-color','#ffc8aa');$(cap).next().css('border-left-color','#ffc8aa');//清理原来的内容for(var j=0;j<$('.child').length;j++){//console.log($('.child')[j]);$($('.child')[j]).empty();$($('.child')[j]).css('width','0px');}active=this.innerHTML;myNodes.forEach(function(item){if(active==item.name){myAnimate(item.children,mybox);}});}//顺序显示orderShow($(mybox),$(mybox).children().length-1);}, function(){//变色$(this).css('background-color','#FF7800');$(this).next().css('border-left-color','#FF7800');});function myAnimate(arr,ele){// console.log(ele);var $ele=$(ele);var pos;arr.forEach(function(item,index){pos=space*index+20;addOne(item,pos+'px');});$ele.animate({width:pos+100+'px'},200,'linear',function(){var left=pos+80+'px';$ele.append("<span class='hr-over' style='left:"+left+"'></span>");});function addOne(item,pos){var mylink="<a href='"+item.url+"'>"+item.name+"</a>";$ele.append("<span class='cap-child' style='display:none;left:"+pos+"'>"+mylink+"</span>")}}function orderShow($it,times){if(times>=0){setTimeout(function(){$($it.children()[times]).css('display','block')$($it.children()[times]).addClass('showit');orderShow($it,times-1)},100);}elsereturn;}
</script></body>
</html>
效果:
jQuery 设计和自定义一个带展开动画效果的导航栏相关推荐
- WinEdit 的algorithm2e包自定义一个带竖线的模块代码
WinEdit 的algorithm2e包自定义一个带竖线的模块 代码 \documentclass{ctexart} \usepackage[linesnumbered,ruled,vlined]{ ...
- 京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hi ...
- 赞!网页设计中难得一见的20个动画效果
动画效果给网页增添了趣味,带给访愉悦的心情.这篇文章给大家带来网页设计中难得一见的20个动画效果,这些优秀的网页设计作品能够给你激发很多的网页设计灵感,相信你一定会喜欢!一起欣赏. 您可能感兴趣的相关 ...
- anime.js 实战:实现一个带有描边动画效果的复选框...
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
- 基于jquery fly插件实现加入购物车抛物线动画效果
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- html卷轴展开动画,MAYA制作北京奥运卷轴展开动画效果
本教程是向脚本之家的朋友介绍利用MAYA制作北京奥运卷轴展开动画效果.教程难度一般.希望脚本之家的朋友们喜欢这篇教程.先看看最终的效果图: 具体制作步骤如下: 1.建一个nurbs面片,u轴向增加一定 ...
- Android—ListView Item 展开动画效果
Android-ListView Item 展开动画效果 最近在做一个关于ListView item的展开效果,类似于 "粮仓" App 的商店页面,点击Item,展开显示子Vie ...
- android 一个有漂亮动画效果的Dialog
原帖地址:http://gitonway.blog.163.com/blog/static/236894038201471102456976/ ※效果 ※简介 一个有漂亮动画效果的Dialog,类似 ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
最新文章
- Ubuntu更新时遇到/boot空间不足
- linux dd命令使用详解
- 【报告分享】女性自我保护手册,教你应对10种常见危险处境.pdf(附189页pdf下载链接)...
- warning LNK4070的解决办法
- Less 官方文档学习笔记
- Java 泛型完全解读
- Request.getparameternames有什么用
- 内核操作系统Linux内核变迁杂谈——感知市场的力量
- elasticsearch(es)的安装-macOs
- tf.ones_like()函数用法详解(附代码理解)
- 邓仰东专栏|机器学习的那些事儿(二):机器学习简史
- 大数据背景下互联网用户行为分析
- Android之sdcard保存数据
- 建立名字为Project1的解决方案
- 111、爆炸极限的概念
- 基于SSM(Spring+SpringMVC+MyBatic)的停车场管理系统
- 微信传文件又慢又限制大小?试试这3个免费在线传文件工具!
- java二维数组添加数据_Java自学路线图
- AWS攻略——Peering连接VPC
- 艾韵智能红外盒子刷写飞阳物联平台红外固件