以下是 jQuery带遮罩阴影网址导航js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery带遮罩阴影网址导航</title>
<!-- jQuery library (served from Google) -->
<script src="js/jquery-1.8.2.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/index-style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav-main" style="zoom: 1.1125;">
<div id="search" >
<div id="searchout">
<div id="search_type" >
<div class="search_top_type" type="web" >Web</div>
<div class="search_top_type" type="news">News</div>
<div class="search_top_type" type="image">Images</div>
<div class="search_top_type" type="video">Videos</div>
<div class="search_top_type" type="music">Blogs</div>
<div class="search_top_type" type="map">Maps</div>
</div>
<div id="searchform">
<div id="search_option" > </div>
<input type="text" id="search_input" name="search">
<div id="searchbutton"></div>
</div>
<div id="search_sg">
<div id="site_sg">
</div>
<div id="sousuo_sg">
</div>
</div>
</div>
</div>
</div>
<div id="main">
<ul class="bxslider">
<li>
<ul>
<li>
<div class="case_w">
<img src="images/renren.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
<li>
<div class="case_w">
<img src="images/zhifubao.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>
<div class="case_w">
<img src="images/sina.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
<li>
<div class="case_w">
<img src="images/appstore.com.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>
<div class="case_w">
<img src="images/douban.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
<li>
<div class="case_w">
<img src="images/bdlogo.gif" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>
<div class="case_w">
<img src="images/yahoo.com.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
<li>
<div class="case_w">
<img src="images/dangdang.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>
<div class="case_w">
<img src="images/youtube.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
<li>
<div class="case_w">
<img src="images/twitter.com.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>
<div class="case_w">
<img src="images/aiqiyi.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
<li>
<div class="case_w">
<img src="images/appstore.com.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>
<div class="case_w">
<img src="images/amazon.com.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
<li>
<div class="case_w">
<img src="images/youtube.com.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>
<div class="case_w">
<img src="images/bdlogo.gif" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
<li>
<div class="case_w">
<img src="images/google.com.png" />
<div class="fire"></div>
<a href="#" class="x"></a>
<a href="#" class="y"></a>
</div>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".bxslider li ul li").hover(function(){
$(".x",this).stop().css({'left':'35px'}).animate({'left':"40px"},400).show();
$(".y",this).stop().css({'right':'35px'}).animate({'right':"40px"},400).show();
$('.fire',this).fadeIn(500);
},function(){
// $('.x, .y',this).stop().animate({"top":"30px"},400);
$('.fire, .x, .y',this).fadeOut(500);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
slideWidth: 240,
slideMargin:0,
auto: false
});
});
</script>
<div id="slider-prev" class="switch_button">
</div>
<div id="slider-next" class="switch_button">
</div>
</body>
</html>
CSS代码(index-style.css):
body{/* background-image:url(../images/bg.jpg);background-color:rgb(48,161,147);*/
font-family:"微软雅黑",Arial;background-size:cover;background-attachment:fixed;-webkit-text-size-adjust:none;}
p,input,div,span,li{font-family:"微软雅黑",Arial;}
::-webkit-scrollbar{width:6px;height:9px;background-repeat:no-repeat;background-color:transparent;}
::-webkit-scrollbar-thumb{background-color:rgba(158,233,0,0.79);}
::-webkit-scrollbar-thumb:hover{background-color:rgba(158,233,0,1);}
#nav-main{width:962px;margin:0 auto;overflow:hidden;}
/*以下跟搜索有关*/
#search{margin-top:80px;width:960px;height:120px;}
#searchout{width:760px;height:80px;margin:0 auto;padding-left:100px;position:relative;}
#search_type{width:560px;height:20px;padding-left:90px;float:left;}
#searchform{width:760px;height:42px;margin:10px auto 0;float:left;}
#search_option{width:80px;height:34px;padding-top:6px;float:left;font-size:17px;background-image:url(../images/select.png);border:transparent solid 1px;border-right:none;background-position:right 6px;background-size:70%;background-repeat:no-repeat;text-align:center;background-color:rgba(253,253,253,0.4);color:#838383;cursor:pointer;position:relative;z-index:1;}
#search_input{width:520px;height:38px;float:left;padding-left:10px;border:transparent solid 1px;border-left:none;border-right:none;outline:0;background-color:rgba(253,253,253,0.4);font-family:"微软雅黑";font-size:17px;color:#464646;position:relative;z-index:1;}
#searchbutton{width:40px;height:40px;float:left;border:transparent solid 1px;border-left:none;background-color:rgba(253,253,253,0.4);background-image:url(../images/a.png);background-size:70%;background-repeat:no-repeat;background-position:center;}
#searchbutton:hover{background-color:rgba(253,253,253,0.6);}
#searchbutton:active{background-color:rgba(253,253,253,0.4);}
.search_top_type{width:auto;height:20px;border-bottom:2px solid rgba(3,247,237,0);;font-size:15px;float:left;margin-right:40px;padding-bottom:3px;color:#F3F3F3;cursor:pointer;}
.search_top_type:hover{border-bottom:2px solid rgba(3,247,237,1);color:#99CC00;}
#search_sg{position:absolute;top:71px;left:0px;width:652px;height:auto;background-color:rgba(255,255,255,0.7);z-index:2;}
分享到QQ
分享到微博
微信扫一扫
