经验分享程序开发文档资料数据资源其它资源

jQ波浪动画导航菜单代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQ波浪动画导航菜单代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQ波浪动画导航菜单代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jQ波浪动画导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/animateBackground-plugin.js"></script>
<script type="text/javascript" src="js/jquery.animate-shadow-min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/jquery.nav.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
</head>
<body>
    <div id="menu-wrapper">
        
            <div id="nav">
                <div class="menuitem">
                    <div>
						<a href="#section-1">
							<div class="inner-menu-wrapper"></div><div class="inner-menu-wrapper-inv"></div>
							<img src="images/1.png" alt="1-icon" />
						</a>
                    </div>
                </div>
                <div class="menuitem">
                    <div>
						<a href="#section-2">
							<div class="inner-menu-wrapper"></div><div class="inner-menu-wrapper-inv"></div>
							<img src="images/2.png" alt="2-icon" />
						</a>
                    </div>
                </div>
                <div class="menuitem">
                    <div>
						<a href="#section-3">
							<div class="inner-menu-wrapper"></div><div class="inner-menu-wrapper-inv"></div>
							<img src="images/3.png" alt="4-icon" />
						</a>
                    </div>
                </div>
                <div class="menuitem">
                    <div>
						<a href="#section-4">
                        <div class="inner-menu-wrapper"></div><div class="inner-menu-wrapper-inv"></div>
                        <img src="images/4.png" alt="3-icon" />
						</a>
                    </div>
                </div>
                <div class="menuitem">
                    <div>
						<a href="#section-5">
                        <div class="inner-menu-wrapper"></div><div class="inner-menu-wrapper-inv"></div>
                        <img src="images/5.png" alt="5-icon" />
						</a>
                    </div>
                </div>
            </div>
<script type="text/javascript" src="js/gbin1.js"></script>
<script type="text/javascript" src="js/fixie.js"></script>
</body>
</html>

JS代码(fixie.js):

/* * Fixie.js * by Ryhan Hassan * ryhanh@me.com * * Automagically adds filler content * whenever an element has class="fixie". * Hope you find it useful:) */
var fixie = (function (){
	var selector;
	var imagePlaceHolder = "http://placehold.it/${
	w}
x${
	h}
";
	if (typeof window.getElementsByClassName != 'function'){
	document.getElementsByClassName = function (cl){
	var retnode = [];
	var myclass = new RegExp('\\b' + cl + '\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0;
	i < elem.length;
	i++){
	var classes = elem[i].className;
	if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}
;
}
/* * Spec * Here are some functions you might find useful * * fixie_handler(element) * fixie_handle_elements(elements) * * fixie_fetchWord();
	* fixie_fetchPhrase();
	* fixie_fetchSentence();
	* fixie_fetchParagraph();
	* fixie_fetchParagraphs();
	* */
 /* * fixie_handler(element) * * Takes in an element and adds filler content. * Returns false if tag is unrecognized. */
 function fixie_handler(element){
	if (!/^\s*$/.test(element.innerHTML)){
	var childs = element.children;
	if(childs.length){
	for(var fixie_i = 0;
	fixie_i < childs.length;
	fixie_i++){
	fixie_handler(childs[fixie_i]);
}
}
return;
}
switch (element.nodeName.toLowerCase()){
	case 'b':case 'em':case 'strong':case 'button':case 'th':case 'td':case 'title':case 'tr':element.innerHTML = fixie_fetchWord();
	break;
	case 'header':case 'cite':case 'caption':case 'mark':case 'q':case 's':case 'u':case 'small':case 'span':case 'code':case 'pre':case 'li':case 'dt':case 'h1':case 'h2':case 'h3':case 'h4':case 'h5':case 'h6':element.innerHTML = fixie_fetchPhrase();
	break;
	case 'footer':case 'aside':case 'summary':case 'blockquote':case 'p':element.innerHTML = fixie_fetchParagraph();
	break;
	case 'article':case 'section':element.innerHTML = fixie_fetchParagraphs() break;
	/* Special cases */
 case 'a':element.href = "http://ryhan.me/";
	element.innerHTML = "www." + fixie_fetchWord() + fixie_capitalize(fixie_fetchWord()) + ".com";
	break;
	case 'img':var src = element.getAttribute('src') || element.src;
	var temp = element.getAttribute('fixie-temp-img');
	if(src == "" || src == null || temp == true || temp == "true"){
	var width = element.getAttribute('width') || element.width || (element.width = 250);
	var height = element.getAttribute('height') || element.height || (element.height = 100);
	element.src = imagePlaceHolder.replace('${
	w}
',width).replace('${
	h}
',height);
	element.setAttribute('fixie-temp-img',true);
}
break;
	case 'ol':case 'ul':element.innerHTML = fixie_fetchList();
	break;
	default:element.innerHTML = fixie_fetchSentence();
}
}
// Handle an array of elements function fixie_handle_elements(elements){
	for (var i = 0;
	i < elements.length;
	i++){
	fixie_handler(elements[i]);
}
}
// Begin generator var fixie_wordlibrary = ["I","8-bit","ethical","reprehenderit","delectus","non","latte","fixie","mollit","authentic","1982","moon","helvetica","dreamcatcher","esse","vinyl","nulla","Carles","bushwick","bronson","clothesline","fin","frado","jug","kale","organic","local","fresh","tassel","liberal","art","the","of","bennie","chowder","daisy","gluten","hog","capitalism","is","vegan","ut","farm-to-table","etsy","incididunt","sunt","twee","yr","before","gentrify","whatever","wes","Anderson","chillwave","dubstep","sriracha","voluptate","pour-over","esse","trust-fund","Pinterest","Instagram","DSLR","vintage","dumpster","totally","selvage","gluten-free","brooklyn","placeat","delectus","sint","magna","brony","pony","party","beer","shot","narwhal","salvia","letterpress","art","party","street-art","seitan","anime","wayfarers","non-ethical","viral","iphone","anim","polaroid","gastropub","city",'classy','original','brew'] function fixie_capitalize(string){
	return string.charAt(0).toUpperCase() + string.slice(1);
}
function fixie_fetchWord(){
	return fixie_wordlibrary[constrain(0,fixie_wordlibrary.length - 1 )];
}
function constrain(min,max){
	return Math.round(Math.random() * (max - min) + min)}
function fixie_fetch(min,max,func){
	var fixie_length = constrain(min,max);
	var result = [];
	for (var fixie_i = 0;
	fixie_i < fixie_length;
	fixie_i++){
	result.push(func());
}
return fixie_capitalize(result.join(' '));
}
function fixie_fetchPhrase(){
	return fixie_fetch(3,5,fixie_fetchWord);
}
function fixie_fetchSentence(){
	return fixie_fetch(4,9,fixie_fetchWord) + '.';
}
function fixie_fetchParagraph(){
	return fixie_fetch(3,7,fixie_fetchSentence);
}
function fixie_fetchParagraphs(){
	var fixie_length = constrain(3,7);
	var fixie_str = "";
	for (var fixie_i = 0;
	fixie_i < fixie_length - 1;
	fixie_i++){
	fixie_str += "<p>" + fixie_fetchParagraph() + "</p>";
}
return fixie_str;
}
function fixie_fetchList(){
	var i,n = Math.random() * 4 + 4,list = [];
	for(i = 0;
	i < n;
	i++){
	list.push(fixie_fetchPhrase());
}
return '<li>' + list.join('</li><li>') + '</li>';
}
// Handle all elements with class 'fixie' fixie_handle_elements(document.getElementsByClassName('fixie'));
	// Handle elements which match give css selectors function init_str(selector_str){
	if (!document.querySelectorAll){
	return false;
}
try{
	fixie_handle_elements(document.querySelectorAll(selector_str));
	return true;
}
catch (err){
	return false;
}
}
return{
	/* returns true if successful,false otherwise */
 'init':function(){
	if (selector){
	init_str(selector);
}
else{
	fixie_handle_elements(document.getElementsByClassName('fixie'));
}
}
,'setImagePlaceholder':function(pl){
	imagePlaceHolder = pl;
	return this;
}
,'setSelector':function(sl){
	if (typeof sl === "object"){
	selector = sl.join(",");
}
else if (sl){
	selector = sl;
}
return this;
}
}
;
}
)();

JS代码(gbin1.js):

/*background wave effect by gbin1.com*/
$(document).ready(function(){
	Cufon.replace('.navitem').CSS.ready(function(){
	animateWave();
	$('#nav').onePageNav({
	filter:':not(.external)',scrollThreshold:0.25}
);
}
);
}
);
	function animateWave(){
	$("div.menuitem").on("mouseenter",function animationEnter(evt){
	var innerMenuWrapper = $(this).find("div.inner-menu-wrapper");
	var innerMenuWrapperInv = $(this).find("div.inner-menu-wrapper-inv");
	$(this).css({
	"position":"relative"}
);
	$(this).stop().animate({
	"boxShadow":"15px 15px 15px rgba(0,0,0,0.8)","top":"-10px","left":"-10px"}
,"fast");
	//wave animation 1function animation1(){
	innerMenuWrapper.animate({
	backgroundPosition:"-1500px -120px"}
,{
	duration:5000,easing:"easeInOutQuad",complete:function(){
	innerMenuWrapper.animate({
	backgroundPosition:"0px -120px"}
,{
	duration:5000,easing:"easeInOutQuad",complete:function(){
	animation1();
}
}
);
}
}
);
}
//wave animation 2function animation2(){
	innerMenuWrapperInv.animate({
	backgroundPosition:"-1500px -130px"}
,{
	duration:8000,easing:"easeInOutQuad",complete:function(){
	innerMenuWrapperInv.animate({
	backgroundPosition:"-200px -130px"}
,{
	duration:8000,easing:"easeInOutQuad",complete:function(){
	animation2();
}
}
);
}
}
);
}
innerMenuWrapper.animate({
	opacity:0.6}
,{
	queue:false,duration:400,easing:"easeInOutQuad"}
);
	animation1();
	innerMenuWrapperInv.animate({
	opacity:0.3}
,{
	queue:false,duration:400,easing:"easeInOutQuad"}
);
	animation2();
}
);
	$("div.menuitem").on("mouseleave",function animationLeave(evt){
	var innerMenuWrapper = $(this).find("div.inner-menu-wrapper");
	var innerMenuWrapperInv = $(this).find("div.inner-menu-wrapper-inv");
	$(this).stop().animate({
	"boxShadow":"1px 1px 15px #303030","top":"0px","left":"0px"}
,"fast");
	innerMenuWrapper.stop(true).animate({
	opacity:0}
,{
	duration:300,easing:"easeInOutQuad",complete:function(){
	innerMenuWrapper.css("backgroundPosition","0px -120px");
}
}
);
	innerMenuWrapperInv.stop(true).animate({
	opacity:0}
,{
	duration:300,easing:"easeInOutQuad",complete:function(){
	innerMenuWrapperInv.css("backgroundPosition","-600px -150px");
}
}
);
}
);
	$("div.menuitem").on("mousedown",function(){
	$(this).stop().animate({
	"boxShadow":"1px 1px 15px #303030","top":"0px","left":"0px"}
,"fast");
}
);
}

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
html{background:none;text-align:left;}
body{width:100%;background:#111111 url(bg.png) repeat;font-family:Tahoma,Geneva,sans-serif;font-size:13px;padding:0;margin:0;color:#999999;line-height:1.6em;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
div#wrapper{margin:0px;}
div.logo{text-align:right;display:block;position:relative;z-index:9;margin-top:0px;}
div#menu-wrapper{width:1200px;padding:0px 10px;margin:0 auto;}
#nav{float:left;margin:20px auto 30px auto;width:200px;position:fixed;}
#content{float:right;width:1000px;}
#content .navitem{font-size:48px;border-bottom:1px solid #505050;padding:30px 10px;text-shadow:1px 1px 20px #505050;}
#content img{margin:10px;border-radius:5px;box-shadow:1px 1px 15px #CCC;}
div#menu-wrapper div.menuitem{z-index:1;position:relative;top:0px;left:0px;height:150px;background:#303030;overflow:hidden;border-radius:5px;float:left;width:150px;margin:10px;box-shadow:1px 1px 15px #303030;}
div#menu-wrapper div.menuitem>div{border-radius:5px;height:100%;width:100%;display:block;}
div#menu-wrapper div.menuitem img{opacity:0.8;position:absolute;top:50%;left:50%;margin:-55px 0 0 -60px;z-index:0;}
div#menu-wrapper div.menuitem img:hover{cursor:pointer;}
div.inner-menu-wrapper{width:100%;height:100%;position:absolute;top:0px;left:0px;display:block;background:url(light.png) 0px -120px no-repeat;cursor:pointer;opacity:0;border-radius:5px;}
div.inner-menu-wrapper-inv{width:100%;height:100%;position:absolute;top:0px;left:0px;opacity:0;display:block;background:url(light.png) -200px -130px no-repeat;cursor:pointer;box-shadow:1px 1px 0px rgba(255,255,255,0.1) inset,-1px -1px 0px rgba(255,255,255,0.1) inset,0px 0px 60px #000000 inset;border-radius:5px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
115.18 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
115.18 KB
立即下载
虞冰菊
了解
打赏作者 鼓励作者
Html 动画效果2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章