美乐网底部收藏栏代码

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

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

以下是美乐网底部收藏栏代码的示例演示效果:

当前平台(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=gb2312" />
    <meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为美乐网底部收藏栏代码，属于站长常用代码" />
    <title>美乐网底部收藏栏代码</title>
    <link href="css/colBar.css" rel="stylesheet" />
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.colBar.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div id="collection_banner">
        <p>喜欢<b>美乐网</b>吗？　按下　<span id="ctrlKey" class="released">Ctrl</span>　＋　<span id="dKey" class="released">D</span>　就可以收藏了哟！　<a href="#" id="hide_banner_col" onclick="jQuery('#collection_banner').slideUp( 500 ) ;">知道了。</a></p>
    </div>
    <script type="text/javascript">
        $.colBar();
    </script>
</body>
</html>

JS代码(jquery.colBar.js):

;
	(function ($){
	$.extend({
	"colBar":function (){
	if (!document.cookie){
	var $doc = $(document),$collection = $('#collection_banner'),$ctrlKey = $('#ctrlKey'),$dKey = $('#dKey'),kc;
	$('#hide_banner_col').click(function (){
	$collection.slideUp(500);
}
);
	$doc.keydown(function (e){
	kc = e.keyCode;
	if (kc === 17){
	$ctrlKey.attr('class','pressed');
}
else if (kc === 68){
	if (e.ctrlKey){
	document.cookie = 'isCol=1';
	$collection.html('<p>感谢您对<b>美乐网</b>的支持！</p>').delay(1000).slideUp(500);
}
else{
	$dKey.attr('class','pressed');
}
}
}
).keyup(function (e){
	kc = e.keyCode;
	if (kc === 17){
	$ctrlKey.attr('class','released');
}
else if (kc === 68 && e.ctrlKey === false){
	$dKey.attr('class','released');
}
}
);
	$collection.slideDown(500);
}
}
}
);
}
(jQuery));

CSS代码(colBar.css):

#collection_banner div,span,p,a,b{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
#collection_banner{display:none;position:fixed;bottom:0;left:0;_bottom:expression(documentElement.scrollTop+"px");_position:absolute;_left:auto;z-index:99;width:100%;height:42px;line-height:42px;font-size:14px;text-align:center;color:#666;background-color:rgba(255,255,215,0.9);box-shadow:0 -2px 0 0 rgba(0,0,0,0.05);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#EEffffd7',EndColorStr='#EEffffd7');}
#collection_banner b{color:#037c3d;}
#collection_banner .released{border:1px dashed;padding:0 .5em;}
#collection_banner .pressed{border:1px solid #999;padding:0 .5em;background:#999;color:rgba(255,255,215,0.9);}
#collection_banner a{color:#037c3d;text-decoration:none;}
#collection_banner a:hover{text-decoration:underline;}

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