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

左三千

于 2022-03-29 01:23:54 发布

阅读量221

点赞数

分类专栏： JQuery 文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/zuoyou9461/article/details/123810447

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

纯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);