利用jQuery CSS3实现网页底部炫酷工具条



15 57 20



特效描述:利用jQuery CSS3实现 网页底部 炫酷工具条,利用jQuery CSS3实现网页底部炫酷工具条

代码结构

1. 引入CSS

<link href="style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

3. HTML代码

<script type="text/javascript">
$(document).ready(function(){
  //hide toolbar and make visible the 'show' button
	$("span.downarr a").click(function() {
    $("#toolbar").slideToggle("fast");
    $("#toolbarbut").fadeIn("slow");    
  });
  //show toolbar and hide the 'show' button
  $("span.showbar a").click(function() {
    $("#toolbar").slideToggle("fast");
    $("#toolbarbut").fadeOut();    
  });
  //show tooltip when the mouse is moved over a list element 
  $("ul#social li").hover(function() {
		$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
    $(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
        $(this).find("div").hide();
    });
  });
  //don't jump to #id link anchor 
  $(".facebook, .twitter, .delicious, .digg, .rss, .stumble, .menutit, span.downarr a, span.showbar a").click(function() {
   return false;                                         
	});
  //show quick menu on click 
	$("span.menu_title a").click(function() {
		if($(".quickmenu").is(':hidden')){ //if quick menu isn't visible 
			$(".quickmenu").fadeIn("fast"); //show menu on click
		}
		else if ($(".quickmenu").is(':visible')) { //if quick menu is visible 
      $(".quickmenu").fadeOut("fast"); //hide menu on click
    }
	});
	//hide menu on casual click on the page
	$(document).click(function() {
			$(".quickmenu").fadeOut("fast");
			$(".quickmenu").css({'vivibility': 'hidden'});
	});
	$('.quickmenu').click(function(event) { 
		event.stopPropagation(); //use .stopPropagation() method to avoid the closing of quick menu panel clicking on its elements 
	});
});
</script>
<div id="toolbarbut"> <!-- hide button -->
<span class="showbar"><a href="#">show bar</a></span>
</div>
<div id="toolbar"> <!-- toolbar container -->
<div class="leftside"> <!-- all things in floating left side -->
  <ul id="social">
    <li><a class="rss" href="#"></a><!-- icon -->
      <div id="tiprss" class="tip"><!-- tooltip -->
        <ul>
          <li><a href="#">580 Readers</a></li>
          <li><a href="#"><small>[Subscribe]</small></a></li>
        </ul>  
      </div>
    </li>
    <li><a class="facebook" href="#"></a>
      <div id="tipfacebook" class="tip">
        <ul>
          <li><a href="#">Share Page</a></li>
          <li><a href="#">| Profile</a></li>
        </ul>  
      </div>  
    </li>
    <li><a class="twitter" href="#"></a>
      <div id="tiptwitter" class="tip">
        <ul>
          <li><a href="#">ReTweet</a></li>
          <li><a href="#">| Profile</a></li>
        </ul>  
      </div>
    </li>
    <li><a class="delicious" href="#"></a>
      <div id="tipdelicious" class="tip">
        <ul>
          <li><a href="#">Bookmark</a></li>
          <li><a href="#">| Profile</a></li>
        </ul>  
      </div>
    </li>
    <li><a class="digg" href="#"></a>
      <div id="tipdigg" class="tip">
        <ul>
          <li><a href="#">Digg</a></li>
          <li><a href="#">| Profile</a></li>
        </ul>  
      </div>
    </li>
    <li><a class="stumble" href="#"></a>
      <div id="tipstumble" class="tip">
        <ul>
          <li><a href="#">Stumble</a></li>
          <li><a href="#">| Profile</a></li>
        </ul>  
      </div>
    </li>
  </ul>
</div>
<div class="rightside"> <!-- all things in floating left side -->
  <span class="downarr"> <!-- hide button -->
  <a href="#"></a>
  </span>
  <span class="menu_title">
    <a class="menutit" href="#">quick menu</a> <!-- quick menu title -->
  </span>
  <div class="quickmenu">
    <ul> <!-- quick menu list -->
      <li><a href="#">Premium Member</a></li>
      <li><a href="#">Become Author</a></li>
      <li><a href="#">Submit News</a></li>
      <li><a href="#">Send Feedback</a></li>
      <li><a href="http://51qianduan.com">Contact Us</a></li>
      <li><a href="#">Privacy Policy</a></li>
    </ul> 
  </div>
</div>
</div>
<div id="header">
  <h1><a href="http://51qianduan.com">Nice Toolbar for You Website</a></h1>
</div>
<div id="downhead">
  <h2>How to Realize a Simple and Nice Toolbar Using CSS and jQuery - <em>by PV.M Garage</em></h2>
  <img src="images/preview.jpg" alt="preview" />
  <p>In This page you can observe the final result of a tutorial that explains some simple steps to create a useful toolbar. We hope you can find interesting this solution for your custom bar. Thanks for reading!<br />
</p>
</div>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 文字提示框 提示文字 提示框/弹出层
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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