经验分享程序开发文档资料数据资源其它资源

jQuery Tooltip提示插件js特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery Tooltip提示插件js特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery Tooltip提示插件js特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Tooltip提示插件</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<link rel="stylesheet" type="text/css" href="css/prettify.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jgfeed.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>

<body>

<div id="background">
	<img src="images/large-background.jpg" />
</div>
<div id="wrapper">
		<section id="welcome">
			<img src="images/tooltipster.svg" alt="Tooltipster" id="tooltipster" />
	<ul id="browser-support">
		<li>
		<img src="images/browser-chrome.png" alt="Chrome" class="tooltip" title="Chrome Support" />
		</li>
		<li>
		<img src="images/browser-safari.png" alt="Safari" class="tooltip" title="Safari Support" />
		</li>
		<li>
		<img src="images/browser-opera.png" alt="Opera" class="tooltip" title="Opera Support" />
		</li>
		<li>
		<img src="images/browser-firefox.png" alt="FireFox" class="tooltip" title="FireFox Support" />
		</li>
		<li>
		<img src="images/browser-ie.png" alt="Internet Explorer" class="tooltip" title="IE10, IE9, &amp; IE8 Support + Graceful Degradation" />
		</li>
	</ul>
	<div id="download">
		<a href="#" class="button tooltip alt" title="Version 2.1">
		Download</a></div>
		</section>
</div>
</body>
</html>

JS代码(scripts.js):

$(function(){
	$('.tooltip').not('#welcome .tooltip').tooltipster({
	offsetY:2,}
);
	$('#welcome .tooltip').tooltipster({
	offsetY:2,theme:'.tooltipster-white'}
);
	$('#demo-default').tooltipster({
	offsetY:2}
);
	$('#demo-html').tooltipster({
	fixedWidth:300,position:'right'}
);
	$('#demo-theme').tooltipster({
	animation:'grow',theme:'.tooltipster-pink'}
);
	$('#demo-callback').tooltipster({
	content:'Loading...',updateAnimation:false,functionBefore:function(origin,continueTooltip){
	continueTooltip();
	if (origin.data('ajax' !== 'cached')){
	$.jGFeed('http://ws.audioscrobbler.com/2.0/user/ce3ge/recenttracks.rss?',function(feeds){
	var content = '';
	if(!feeds){
	content = 'Woops - there was an error retrieving my last.fm RSS feed';
	origin.tooltipster('update',content);
}
else{
	content = 'I last listened to:<strong>' + feeds.entries[0].title + '</strong>';
	origin.tooltipster('update',content).data('ajax','cached');
}
}
,10);
}
}
,functionAfter:function(origin){
	alert('The tooltip has closed!');
}
}
);
	$('#demo-events').tooltipster({
	trigger:'click'}
);
	$(window).keypress(function(){
	$('#demo-events').tooltipster('hide');
}
);
	$('#demo-interact').tooltipster({
	interactive:true}
);
	$('#demo-touch').tooltipster({
	touchDevices:false}
);
	$('#demo-icon').tooltipster({
	iconDesktop:true,iconTouch:true}
);
	$('.tooltipster-light-preview').tooltipster({
	theme:'.tooltipster-light'}
);
	$('.tooltipster-punk-preview').tooltipster({
	theme:'.tooltipster-punk'}
);
	$('.tooltipster-noir-preview').tooltipster({
	theme:'.tooltipster-noir'}
);
	$('.tooltipster-shadow-preview').tooltipster({
	theme:'.tooltipster-shadow'}
);
	$('header select').change(function(){
	var goTo = $(this).val();
	var section = $('#'+goTo);
	var offset = section.offset().top;
	$('html,body').scrollTop(offset);
}
);
	prettyPrint();
}
);

CSS代码(reset.css):

@charset "UTF-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(style.css):

/*blue #0078c9orange #ff5e3c*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);@font-face{font-family:'icomoon';src:url('../images/icons/icomoon.eot');src:url('../images/icons/icomoon.eot?#iefix') format('embedded-opentype'),url('../images/icons/icomoon.svg#icomoon') format('svg'),url('../images/icons/icomoon.woff') format('woff'),url('../images/icons/icomoon.ttf') format('truetype');font-weight:normal;font-style:normal;}
::selection{background:#0078c9;color:#fff;}
::-moz-selection{background:#0078c9;color:#fff;}
body,html{height:100%;}
body{color:#5d6365;font-size:1em;line-height:1.6em;font-family:'Open Sans',sans-serif;font-weight:300;background:#5d6365;}
#background{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
#background img{min-height:100%;min-width:100%;}
#background:before{content:'';display:block;width:100%;height:20%;position:absolute;bottom:0;background:-moz-linear-gradient(top,rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(93,99,101,0)),color-stop(100%,rgba(93,99,101,1)));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%);/* IE10+ */
background:linear-gradient(to bottom,rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#005d6365',endColorstr='#5d6365',GradientType=0 );/* IE6-9 */
}
#wrapper{width:100%;max-width:1300px;margin:0 auto;position:relative;box-shadow:0.6em 0px 15px rgba(0,0,0,0.1),-0.6em 0px 15px rgba(0,0,0,0.1);}
*{-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;transition:all 300ms;}
h1{font-weight:300;font-size:1.4em;line-height:1.4em;margin-bottom:1.8em;}
h2{color:#a9b1b3;font-weight:300;font-size:4em;line-height:1.4em;margin-bottom:0.5em;}
h3{font-size:2em;line-height:1.4em;margin-bottom:0.7em;padding-top:1em;}
h4{font-size:1.4em;line-height:1.4em;font-weight:400;margin-bottom:1em;}
p{margin-bottom:1.5em;}
strong{font-weight:600;}
a{text-decoration:none;color:#0078c9;font-weight:600;}
a:hover{color:#a9b1b3;}
a.alt{color:rgba(255,255,255,0.75);}
a.alt:hover{color:rgba(255,255,255,1);}
a:before{font-family:'icomoon';font-style:normal;speak:none;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
a.button{display:inline-block;padding:0.8em 1em;border:3px solid #ff5e3c;border-radius:6px;color:#ff5e3c;background:#fff;font-weight:600;}
a.button:hover{background:#ff5e3c;color:#fff;}
a.button.alt{color:#ff5e3c;border:none;}
a.button.alt:hover{background:#ff5e3c;color:#fff;border:none;}
a.button:active{-webkit-transform:scale3d(0.95,0.95,1);-moz-transform:scale3d(0.95,0.95,1);-o-transform:scale3d(0.95,0.95,1);-ms-transform:scale3d(0.95,0.95,1);transform:scale3d(0.95,0.95,1);}
a.white{color:#fff;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,0);}
a.white:hover{border-bottom:1px solid rgba(255,255,255,1);}
.row{overflow:hidden;}
header{background:#fff;position:fixed;top:0;right:0;left:0;width:100%;max-width:1300px;padding:0 1.25em 0 2em;margin:0 auto;box-shadow:0px 3px 0px rgba(0,0,0,0.05);box-sizing:border-box;-moz-box-sizing:border-box;}
header select{display:none;}
section{width:100%;margin:0 auto;overflow:hidden;border-bottom:2px dashed #e5eaeb;padding:6em;background:#fff;box-sizing:border-box;-moz-box-sizing:border-box;}
#talk{border-bottom:none !important;}
footer{width:100%;margin:0 auto;padding:6em;background:#0078c9;color:#fff;box-sizing:border-box;-moz-box-sizing:border-box;text-align:center;}
nav{width:100%;max-width:1300px;box-sizing:border-box;-moz-box-sizing:border-box;background:#fff;float:right;z-index:2;text-align:right;}
nav ul{display:block;width:auto;float:right;}
nav li{display:inline-block;margin:0;float:left;}
nav a{display:inline-block;font-weight:400;color:#a9b1b3;padding:1.5em 0.75em;}
nav a:hover{background:#0078c9;color:#fff;}
#mobile-nav{display:none;}
#social{width:auto;position:absolute;left:0;top:0;z-index:3;}
#social div{float:left;width:90px;padding:1.5em 2em;}
#tweet{margin-top:2px;}
div#github{position:relative;bottom:4px;margin-left:0px;width:90px;}
#github a{-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;}
pre{box-sizing:border-box;-moz-box-sizing:border-box;padding:3em;background:#e6eff1;box-shadow:0px 0px 20px rgba(0,0,0,0.0);margin-bottom:4em;white-space:pre-wrap;}
pre:hover{background:#fff;box-shadow:0px 0px 20px rgba(0,0,0,0.3);}
pre:last-child{margin-bottom:0;}
/*-------------------------------------Welcome-------------------------------------*/
#welcome{text-align:center;padding:12em 0 9em;color:#fff;width:100%;border-bottom:none;background:rgba(0,0,0,0.3);}
#welcome h1{display:block;max-width:635px;margin-left:auto;margin-right:auto;}
#tooltipster{width:100%;max-width:258px;margin-bottom:2em;}
#browser-support{margin-bottom:2.8em;}
#browser-support li{display:inline-block;margin:0.25em;font-size:0;line-height:0;}
#browser-support li img{height:42px;opacity:0.5;}
#browser-support li img:hover{opacity:1;}
#download{font-size:1.2em;line-height:1.4em;width:100%;}
#download a.button{margin-right:0.6em;}
#download a.button:before{content:"\64";padding-right:1em;font-size:0.9em;}
/*-------------------------------------Demos-------------------------------------*/
#demos ul{display:block;width:100%;font-size:1.4em;line-height:1.4em;}
#demos li{display:block;width:50%;font-weight:400;margin-bottom:1em;overflow:hidden;padding-top:1.4em;padding-right:2em;box-sizing:border-box;-moz-box-sizing:border-box;float:left;}
#demos span{display:block;border:3px solid #ff5e3c;border-radius:100%;box-sizing:border-box;-moz-box-sizing:border-box;width:5em;height:5em;background:#ff5e3c;color:#fff;font-size:0.6em;line-height:1em;font-weight:700;padding:1.8em 0 0 0;text-align:center;margin:-1.4em 1em 0 0;text-transform:uppercase;float:left;}
#demos span:hover{background:#fff !important;color:#5d6365;border:3px solid #5d6365 !important;cursor:pointer;}
/*-------------------------------------Tooltips-------------------------------------*/
#demos span.tooltipster-icon{cursor:help;margin-left:4px;background:#0078c9;border:3px solid #0078c9;width:2.3em;height:2.3em;padding:0.4em 0 0;margin:2em 0 0 -3em;}
.tooltipster-default .tooltipster-content{font-family:'Open Sans',sans-serif;}
.tooltipster-default .tooltipster-content img{float:left;margin-right:10px;border:2px solid #000;}
.tooltipster-default .tooltipster-content p{margin:0;}
.tooltipster-default .tooltipster-content a{color:#fff;border-bottom:1px solid rgba(255,255,255,0.4);}
.tooltipster-default .tooltipster-content a:hover{color:#fff;border-bottom:1px solid rgba(255,255,255,1);}
.tooltipster-blue{background:#0078c9;color:#fff;border-radius:5px;}
.tooltipster-blue .tooltipster-content{font-family:'Open Sans',sans-serif;font-size:14px;line-height:16px;padding:8px 10px;}
.tooltipster-white{background:#fff;color:#0078c9;border-radius:5px;}
.tooltipster-white .tooltipster-content{font-family:'Open Sans',sans-serif;font-size:14px;line-height:16px;padding:8px 10px;}
.tooltipster-pink{background:url(../images/pattern-navy.png);background-color:#ff3c70;color:#fff;border-radius:5px;box-shadow:inset -3px -3px 0 #ff3c70;}
.tooltipster-pink .tooltipster-content{font-family:'Courier',monospace;font-weight:400;font-size:16px;line-height:16px;padding:15px 18px;}
/*-------------------------------------Options-------------------------------------*/
table{width:100%;}
table h4{margin-bottom:0;}
tr:nth-child(odd){background:#f4f5f7;}
td{padding:2em;}
td h4{font-family:'Courier',monospace;color:#0078c9;}
/*-------------------------------------Themes-------------------------------------*/
#themes .themes a{display:inline-block;padding:1em;margin-right:1em;margin-bottom:1em;opacity:0.8;}
#themes a:hover{opacity:1;}
a.tooltipster-default-preview{border-radius:5px;border:2px solid #000;background:#4c4c4c;color:#fff;font-family:Arial,sans-serif;font-size:14px;line-height:16px;padding:8px 10px;font-weight:400;box-sizing:border-box;-moz-box-sizing:border-box;}
a.tooltipster-light-preview{border-radius:5px;border:1px solid #cccccc;background:#ededed;color:#666666;font-family:Arial,sans-serif;font-size:14px;line-height:16px;padding:8px 10px;font-weight:400;}
.tooltipster-light{border-radius:5px;border:1px solid #cccccc;background:#ededed;color:#666666;}
.tooltipster-light .tooltipster-content{font-family:Arial,sans-serif;font-size:14px;line-height:16px;padding:8px 10px;}
a.tooltipster-punk-preview{border-radius:5px;border-bottom:3px solid #f71169;background:#2a2a2a;color:#fff;font-family:'Courier',monospace;font-size:14px;line-height:16px;padding:8px 10px;font-weight:400;}
.tooltipster-punk{border-radius:5px;border-bottom:3px solid #f71169;background:#2a2a2a;color:#fff;}
.tooltipster-punk .tooltipster-content{font-family:'Courier',monospace;font-size:14px;line-height:16px;padding:8px 10px;}
a.tooltipster-noir-preview{border-radius:0px;border:3px solid #2c2c2c;background:#fff;color:#2c2c2c;font-family:'Georgia',serif;font-size:14px;line-height:16px;padding:8px 10px;font-weight:400;}
.tooltipster-noir{border-radius:0px;border:3px solid #2c2c2c;background:#fff;color:#2c2c2c;}
.tooltipster-noir .tooltipster-content{font-family:'Georgia',serif;font-size:14px;line-height:16px;padding:8px 10px;}
a.tooltipster-shadow-preview{border-radius:5px;background:#fff;box-shadow:0px 0px 14px rgba(0,0,0,0.3);color:#2c2c2c;font-family:'Arial',sans-serif;font-size:14px;line-height:16px;padding:8px 10px;font-weight:400;}
.tooltipster-shadow{border-radius:5px;background:#fff;box-shadow:0px 0px 14px rgba(0,0,0,0.3);color:#2c2c2c;}
.tooltipster-shadow .tooltipster-content{font-family:'Arial',sans-serif;font-size:14px;line-height:16px;padding:8px 10px;}
/*-------------------------------------Talk-------------------------------------*/
#talk h3{margin-bottom:1em;}
/*-------------------------------------Breakpoints-------------------------------------*/
@media all and (max-width:1100px){#tweet,#gplus{display:none;}
#demos li{width:100%;}
table,tr,td{display:block;}
td{padding:2em 2em 0 2em;}
td:last-child{padding-bottom:2em;}
}
@media all and (max-width:920px){#demos ul{width:100%;padding:0;}
}
@media all and (max-width:820px){nav ul{display:none;}
#social div{padding:0.5em 0.7em;}
header{padding:0;}
header select{display:block;float:right;margin:1em 1em;}
section{padding:3em;}
#welcome{padding:7.4em 3em 6em;}
#download span{display:block;margin-top:0.5em;}
}
@media all and (max-width:450px){table h4{font-size:1em;line-height:1em;}
section{padding:2em;}
h2{font-size:3em;line-height:1.2em;margin-bottom:0.23em;}
h3{font-size:1.4em;line-height:1.4em;margin-bottom:1.3em;}
h4{font-size:1.2em;}
pre{padding:1em;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
249.17 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
249.17 KB
立即下载
贺璐
了解
打赏作者 鼓励作者
jquery特效8
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章