jq浮动渐变工具栏js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jq浮动渐变工具栏js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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>jq浮动渐变工具栏</title>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/scroll_toolbar.js"></script>
</head>
<body>
<div id="toolbar" align="center"   class="scr_esp_down">
  <div> </div>
  <img src="images/tooltip.png" border="0" class="img_animate" /> </div>
<div style="height:2000px;"> </div>
</body>
</html>

JS代码(scroll_toolbar.js):

var $jx= jQuery.noConflict();
	$jx(window).scroll(function (){
	//whichBrs function identify browserif (whichBrs()=='chrome'){
	$scroll_final=document.body.scrollTop;
	/// identify scroll position in pixels for chorme}
if (whichBrs()=='Internet Explorer' || whichBrs()=='Firefox' ){
	$scroll_final=document.documentElement.scrollTop;
	// identify scroll position for IE and firefox}
var toolbarid=document.getElementById('toolbar');
	if ($scroll_final <300){
	toolbarid.style.visibility='hidden';
}
if ($scroll_final >300 && $scroll_final <600 ){
	toolbarid.style.opacity='0.20';
	toolbarid.style.filter='alpha(opacity=20)';
	toolbarid.style.visibility='visible';
}
if ($scroll_final >600 && $scroll_final <1000 ){
	toolbarid.style.opacity='0.40';
	toolbarid.style.filter='alpha(opacity=40)';
	toolbarid.style.visibility='visible';
}
if ($scroll_final >=1000){
	toolbarid.style.opacity='1.00';
	toolbarid.style.filter='alpha(opacity=100)';
	toolbarid.style.visibility='visible';
}
}
);
	var $bt= jQuery.noConflict();
	var time=0;
	$bt(document).ready(function(){
	$bt("#toolbar").stop(true,true).mouseover(function (){
	if (time==0){
	$bt(".img_animate").slideToggle("slow");
	time=1;
}
}
);
	$bt(".img_animate").click(function (){
	if (time==1){
	$bt(".img_animate").slideToggle("slow");
	time=0;
}
}
);
}
);
	$bt(document).bind('click',function(e){
	var $clicked = $bt(e.target);
	if (!($clicked.is('.img_animate') || $clicked.parents().is('.img_animate'))){
	$bt(".img_animate").stop(true,true);
	time=0;
	$bt(".img_animate").hide();
}
else{
}
}
);
	function whichBrs(){
	var agt=navigator.userAgent.toLowerCase();
	if (agt.indexOf("opera") != -1) return 'Opera';
	if (agt.indexOf("staroffice") != -1) return 'Star Office';
	if (agt.indexOf("webtv") != -1) return 'WebTV';
	if (agt.indexOf("beonex") != -1) return 'Beonex';
	if (agt.indexOf("chimera") != -1) return 'Chimera';
	if (agt.indexOf("netpositive") != -1) return 'NetPositive';
	if (agt.indexOf("phoenix") != -1) return 'Phoenix';
	if (agt.indexOf("firefox") != -1) return 'Firefox';
	if (agt.indexOf("chrome") != -1) return 'chrome';
	if (agt.indexOf("safari") != -1) return 'Safari';
	if (agt.indexOf("skipstone") != -1) return 'SkipStone';
	if (agt.indexOf("msie") != -1) return 'Internet Explorer';
	if (agt.indexOf("netscape") != -1) return 'Netscape';
	if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
	if (agt.indexOf('\/') != -1){
	if (agt.substr(0,agt.indexOf('\/')) != 'mozilla'){
	return navigator.userAgent.substr(0,agt.indexOf('\/'));
}
else return 'Netscape';
}
else if (agt.indexOf(' ') != -1)return navigator.userAgent.substr(0,agt.indexOf(' '));
	else return navigator.userAgent;
}

CSS代码(zzsc.css):

@charset "utf-8";body{background:#160E1C url(../images/demo-floatingbar.jpg) top center no-repeat;color:#CCCCCC}
div.scr_esp_down{width:100%;height:51px;background:url(../images/toolbar_make.jpg) repeat-x;position:fixed;top:0;left:0;z-index:550;opacity:0.10;filter:alpha(opacity=10);visibility:hidden;}
div.scr_esp_down div{width:100%;height:51px;background:url(../images/IS_toolbar_img.jpg) no-repeat top center;}
img.img_animate{display:none;}

附件:下载该文件资源,减少时间成本(增值服务)