jquery实现浏览器嗅探器特效js代码

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

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

以下是 jquery实现浏览器嗅探器特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jquery实现浏览器嗅探器特效</title>
    <link rel="stylesheet" href="styles/style.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <br /><br /> <br /><br />
    <div id="deviceInfo">
        <div id="deviceInfoBox"></div>
        <p></p>	<b>浏览器设备类型侦听(含桌面,android,ios)</b>
    </div>
    <script type="text/javascript" src="js/device.js"></script>
</body>
</html>

JS代码(device.js):

$(document).ready(function (){
	var browser ={
	device:function (){
	var u = navigator.userAgent;
	return{
	trident:u.indexOf('Trident') > -1,presto:u.indexOf('Presto') > -1,//opera内核webKit:u.indexOf('AppleWebKit') > -1,//苹果、谷歌内核gecko:u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核deskWebkit:(u.indexOf("Android") == -1 && u.indexOf("Mobile") == -1),mobileWebKit:!!u.match(/AppleWebKit.*Mobile.*/
) || !!u.match(/AppleWebKit/) || !!u.match(/.*Mobile.*/
),//是否为移动终端ios:!!u.match(/(i[^;
	]+\;
	(U;
	)? CPU.+Mac OS X)/),//ios终端android:u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,//android终端iPhone:u.indexOf('iPhone') > -1 && u.indexOf('Mac') > -1,//是否为iPhoneDiPad:u.indexOf('iPad') > -1,//是否iPadwebApp:u.indexOf('Safari') == -1 //是否为App应用程序，没有头部与底部}
;
}
(),language:(navigator.browserLanguage || navigator.language).toLowerCase(),version:$.browser.version}
;
	$("p").html('<em>设备基础信息:</em>' + navigator.userAgent);
	/*判断webkit内核下的版本*/
 if (browser.device.webKit){
	if (browser.device.deskWebkit){
	$("#deviceInfoBox").html("当前使用的浏览器是:<span>桌面版Chrome/Safari</span>" + " " + ",内核版本号为：" + " <span>" + browser.version + "</span>").parent().slideDown(600);
}
else if (browser.device.mobileWebKit){
	if (browser.device.ios){
	if (browser.device.iPhone){
	$("#deviceInfoBox").html("当前使用的浏览器是:<span>iOS系统iPhone版Safari</span>" + " " + ",内核版本号为：" + " <span>" + browser.version + "</span>").parent().slideDown(600);
}
else if (browser.device.iPad){
	$("#deviceInfoBox").html("当前使用的浏览器是:<span>iOS系统iPad版Safari</span>" + " " + ",内核版本号为：" + " <span>" + browser.version + "</span>").parent().slideDown(600);
}
}
else if (browser.device.android){
	$("#deviceInfoBox").html("当前使用的浏览器是:<span>android系统Webkit</span>" + " " + ",内核版本号为：" + " <span>" + browser.version + "</span>").parent().slideDown(600);
}
}
}
/*判断IE浏览器*/
 if (browser.device.trident){
	$("#deviceInfoBox").html("当前使用的浏览器是:<span>IE浏览器</span>" + " " + ",内核版本号为：" + " <span>" + browser.version + "</span>").parent().slideDown(600);
}
/*判断火狐浏览器*/
 if (browser.device.gecko){
	$("#deviceInfoBox").html("当前使用的浏览器是:<span>火狐浏览器</span>" + " " + ",内核版本号为：" + " <span>" + browser.version + "</span>").parent().slideDown(600);
}
/*判断火狐浏览器*/
 if (browser.device.presto){
	$("#deviceInfo").html("当前使用的浏览器是:<span>欧朋浏览器</span>" + " " + ",内核版本号为：" + " <span>" + browser.version + "</span>").parent().slideDown(600);
}
}
);

CSS代码(style.css):

body{background:#f6f6f6;margin:0;padding:0;}
#deviceInfo{width:640px;height:100px;line-height:100px;font-size:14px;text-align:center;border:1px solid #99bbe8;margin:-50px auto auto -320px;background:#e4f0f8;position:absolute;top:35%;left:50%;border-radius:10px;display:none;}
#deviceInfo p{width:640px;padding-left:15px;line-height:22px;text-align:left;}
#deviceInfo em{font-weight:bold;font-style:normal;}
#deviceInfo span{font-weight:bold;color:#3d54e8;}

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