筋斗云导航,绝对能用，不能用你打我

纯Html+CSS+jQ 缓动-动画——筋斗云导航 CV工程师，拿来即用（^0*0^）

//html部分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link href="css/reset.css" rel="stylesheet" type="text/css"><link href="css/index.css" rel="stylesheet" type="text/css"><script src="js/jquery-3.6.0.min.js"></script> //引入自己的JQ库<script src="js/jquery.movebg.js"></script> //自己写的方法</head><body><div class="wraper"><div class="nav"><ul><li class="nav-item"><a href="javascript:;" target="_blank">首页</a></li><li class="nav-item cur"><a href="javascript:;" target="_blank">新闻</a></li><li class="nav-item"><a href="javascript:;" target="_blank">案例</a></li><li class="nav-item"><a href="javascript:;" target="_blank">产品</a></li><li class="nav-item"><a href="javascript:;" target="_blank">招聘</a></li><li class="nav-item"><a href="javascript:;" target="_blank">案例一</a></li><li class="nav-item"><a href="javascript:;" target="_blank">案例二</a></li></ul><div class="move-bg"></div></div></div><script>$(function() {$(".nav").movebg({width: 120 /*滑块的大小*/ ,extra: 0 /*额外反弹的距离*/ ,speed: 300 /*滑块移动的速度*/ ,rebound_speed: 400 /*滑块反弹的速度*/});})</script></body></body></html>

//css部分

.wraper {width: 1000px;padding-top: 100px;margin: 0 auto}.nav {position: relative;width: 100%;height: 40px;background: #C70757;overflow: hidden}.nav-item {position: relative;float: left;width: 120px;height: 40px;line-height: 40px;text-align: center;font-size: 14px;z-index: 1}.nav-item a {display: block;height: 40px;color: #fff;}.nav-item a:hover {color: #fff}.move-bg {display: none;position: absolute;left: 0;top: 0;width: 120px;height: 40px;background: #4D0B33;z-index: 0}

//公共css 申明样式，类目非常全，可以自己保存，好用

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe {margin: 0;padding: 0;}body,button,input,select,textarea {font-family: tahoma, Arial, "Microsoft YaHei", SimSun;font-size: 12px;line-height: 1.5em;color: #222}h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: normal;}fieldset,img {border: 0;}img {vertical-align: top}address,caption,cite,dfn,em,th,var,optgroup {font-style: normal;font-weight: normal;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {display: block;margin: 0;padding: 0;}/* HTML5 */code,kbd,pre,samp {font-family: courier new, courier, monospace}ol,ul,li {list-style: none;}a {text-decoration: none;color: #222;}a:hover {color: #052299;}a:active {color: #052299;}sup {vertical-align: text-top;}sub {vertical-align: text-bottom;}input,select,button {vertical-align: baseline;*vertical-align: middle;font-family: tahoma, \5b8b\4f53, arial;font-size: 100%;border: none;background: none;}input[type=checkbox],input[type=radio] {vertical-align: middle;margin: 0 5px;}input[type="text"],input[type="password"],textarea {outline-style: none;-webkit-appearance: none;}textarea {resize: none;}textarea {overflow: auto;font: 100% tahoma, \5b8b\4f53, arial;}table {border-collapse: collapse;border-spacing: 0;}.clear {clear: both;height: 0px;line-height: 0px;font-size: 0px;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/* html .clearfix {height: 1%;}/* End hide from IE-mac */*+html .clearfix {min-height: 1%;}*html {zoom:expression(function(ele) {ele.style.zoom="1";document.execCommand("BackgroundImageCache", false, true)}(this))}.fl {float: left;}.fr {float: right}

JQ部分

(function($) {$.fn.movebg = function(options) {var defaults = {width: 120,// /*移动块的大小*/extra: 50,// /*反弹的距离*/speed: 300,// /*块移动的速度*/rebound_speed: 300 /*块反弹的速度*/};var defaultser = $.extend(defaults, options);return this.each(function() {var _this = $(this);var _item = _this.children("ul").children("li").children("a"); /*找到触发滑块滑动的元素    */var origin = _this.children("ul").children("li.cur").index(); /*获得当前导航的索引*/var _mover = _this.find(".move-bg"); /*找到滑块*/var hidden; /*设置一个变量当html中没有规定cur时在鼠标移出导航后消失*/if (origin == -1) {origin = 0;hidden = "1"} else { _mover.show() }; /*如果没有定义cur,则默认从第一个滑动出来*/var cur = prev = origin; /*初始化当前的索引值等于上一个及初始值;*/var extra = defaultser.extra; /*声明一个变量表示额外滑动的距离*/_mover.css({ left: "" + defaultser.width * origin + "px" }); /*设置滑块当前显示的位置*///设置鼠标经过事件_item.each(function(index, it) {$(it).mouseover(function() {cur = index; /*对当前滑块值进行赋值*/move();prev = cur; /*滑动完成对上个滑块值进行赋值*/});});_this.mouseleave(function() {cur = origin; /*鼠标离开导航时当前滑动值等于最初滑块值*/move();if (hidden == 1) { _mover.stop().fadeOut(); } /*当html中没有规定cur时在鼠标移出导航后消失*/});//滑动方法function move() {_mover.clearQueue();if (cur < prev) { extra = -Math.abs(defaultser.extra); } /*当当前值小于上个滑块值时，额外滑动值为负数*/else { extra = Math.abs(defaultser.extra) }; /*当当前值大于上个滑块值时，滑动值为正数*/_mover.queue(function() {$(this).show().stop(true, true).animate({ left: "" + Number(cur * defaultser.width + extra) + "" }, defaultser.speed),function() { $(this).dequeue() }});_mover.queue(function() {$(this).stop(true, true).animate({ left: "" + cur * defaultser.width + "" }, defaultser.rebound_speed),function() { $(this).dequeue() }});};})}})(jQuery);

筋斗云导航,绝对能用，不能用你打我相关推荐

js: 动画筋斗云导航栏仿淘宝关闭二维码
筋斗云导航栏 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
js+html+css筋斗云导航栏
功能简述图片随着鼠标位置在导航栏上变化而变化当点击某个导航栏时,图片位置迁移到当前导航栏的位置处效果预览实现原理给每个li标签添加鼠标事件当鼠标悬浮于li标签的时候,将当前li标签的off ...
HTML+JS+CSS筋斗云导航栏效果
要求: 1.鼠标经过某个li,筋斗云跟着到当前的位置 2.鼠标离开这个li,筋斗云回到原来的位置 3.鼠标点击了某个li,筋斗云就留在点击这个位置 <!DOCTYPE html> < ...
百度Ueditor富文本编辑器修改上传图片的默认路径绝对能用，并且回显，并且超级简单，超级详情,有用点赞好评！
最近做一个项目,项目做完了,再部署的时候,人家要求webapps不能存放图片什么的,因为如果变更,就图片什么就没了,好了现在开始修改. 当初做这个功能的时候,查了很多,感觉都是神仙,代码各种不全,完成 ...
[干货]网页端、移动端导航设计模式全解
界面中的组件设计有很多通用的交互设计模式. 产品导航做为界面上最常见的组件同样也有多种被大家熟知的设计模式,模式化的组件为产品经理快速.有效的创建产品界面.构建信息架构提供的方便的应用. 接下来,我们 ...
网页端、移动端导航设计模式全解
界面中的组件设计有很多通用的交互设计模式. 产品导航做为界面上最常见的组件同样也有多种被大家熟知的设计模式,模式化的组件为产品经理快速.有效的创建产品界面.构建信息架构提供的方便的应用. 接下来,我 ...
Linux那些事儿之戏说USB(15)设备
struct usb_device结构冗长而又杂乱 include/linux/usb.h struct usb_device {int devnum;char devpath[16];u32 rou ...
MSSQL差异备份取系统权限
MSSQL差异备份取系统权限 TEAM里的内部资料放久了,现在不放出来,迟早会有人发掘出来的!既然如此就拿出来大家分享吧! MSSQL差异备份获取webshell 几乎人人皆知,那么我们可以利用差异备 ...
php嵌套模板,thinkphp3.1自定义模板标签嵌套实现
thinkphp3.1自定义模板标签嵌套实现之前做的自定义标签,属性里面读取不到上层标签的值,然后找了很多文档发现没有能解决的,然后就自己研究了一下,搞出来了,下面是方法,绝对能用,不能用我吃了它. ...

筋斗云导航,绝对能用，不能用你打我

筋斗云导航,绝对能用，不能用你打我相关推荐

最新文章

热门文章