利用jQuery实现带遮罩阴影网址导航代码



71 282 95



特效描述:利用jQuery实现 带遮罩阴影 网址导航,利用jQuery实现带遮罩阴影网址导航代码

代码结构

1. 引入CSS

<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/index-style.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.bxslider.min.js"></script>

3. HTML代码

<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动滑过 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 滑动星星打分 切换按钮 form表单 导航菜单导航条 其他更多 鼠标悬停 滑动选项卡切换 网址导航菜单 列表切换 搜索框 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到