以下是 jQuery图片tooltip提示特效代码 的示例演示效果:
部分效果截图:
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" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery图片tooltip提示</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link rel='stylesheet' id='wp_dlmp_styles-css' href='css/styles.css' type='text/css' media='all' />
<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jcarousellite_1.3.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.toolsnew.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".caruselList").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
scroll: 1,
visible: 5,
speed: 600,
mouseWheel: false,
circular:false,
easing: "easeOutBack"
});
$(".tool-item").tooltip({
effect: 'slide',
offset: [0, 2],
onBeforeShow: function(event, position) {
this.getTip().appendTo(document.body);
return true;}}
).dynamic({ bottom: { direction: 'down', bounce: true } });
});
</script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- also like -->
<div class="after_content">
<div class="container">
<div class="also-like-text">
<h3>You might also like</h3>
</div>
<div class="latest-list">
<div class="caruselList">
<ul>
<li>
<a href="#" class="tool-item">
<img src="images/icon_connexus.png" alt="Responsive WordPress Theme" width="80" height="80" border="0" class="thumb" />
</a>
<span class="tooltip"><img src="images/conexus1.jpg" height="225" width="431" alt="Conexus" /></span>
</li>
<li>
<a href="#" class="tool-item">
<img src="images/MetroVibes_v1_160x160.png" alt="Metro WordPress Theme" width="80" height="80" border="0" class="thumb" />
</a>
<span class="tooltip"><img src="images/MetroVibes_bigThmb_12.jpg" height="225" width="431" alt="Metro Vibes" /></span>
</li>
<li>
<a href="#" class="tool-item">
<span class="d20" title="-20%">-20%</span>
<img src="images/thumb_ExquisiteWorks.png" alt="Corporate WordPress Theme" width="80" height="80" border="0" class="thumb" />
</a>
<span class="tooltip"><img src="images/ExquisiteWorks_bigThmb_12.jpg" height="225" width="431" alt="Exquisite Works" /></span>
</li>
<li>
<a href="#" class="tool-item">
<span class="free" title="Free">Free</span>
<img src="images/Gadgetry_80x80.png" alt="Free WordPress Theme" width="80" height="80" border="0" class="thumb" />
</a>
<span class="tooltip"><img src="images/BigThmb_1.jpg" height="225" width="431" alt="Gadgetry" /></span>
</li>
<li>
<a href="#" class="tool-item">
<img src="images/newssetter.png" alt="News WordPress Theme" width="80" height="80" border="0" class="thumb" />
</a>
<span class="tooltip"><img src="images/BigThumb_1.jpg" height="225" width="431" alt="Newssetter" /></span>
</li></ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
JS代码(jcarousellite_1.3.min.js):
/** * jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget. * * Version:1.3 * Note:Requires jQuery 1.4 from version 1.3 */
(function($){
$.jCarouselLite={
version:'1.3'}
;
$.fn.jCarouselLite=function(options){
var o=$.extend({
}
,$.fn.jCarouselLite.defaults,options);
return this.each(function(){
var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";
var div=$(this),ul=div.find('ul'),tLi=ul.children('li'),tl=tLi.length,v=o.visible;
o.start=Math.min(o.start,tLi.length-1);
if(o.circular){
ul.prepend(tLi.slice(tl-v-1+1).clone(true)).append(tLi.slice(0,v).clone(true));
o.start+=v;
}
var li=ul.children('li'),itemLength=li.length,curr=o.start;
div.css("visibility","visible");
li.css({
overflow:o.vertical?"hidden":'visible','float':o.vertical?"none":"left"}
);
ul.css({
margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"}
);
div.css({
overflow:"hidden",position:"relative","z-index":"2",left:"0px"}
);
var liSize=o.vertical?height(li):width(li);
var ulSize=liSize*itemLength;
var divSize=liSize*v;
li.css({
width:li.width(),height:li.height()}
);
ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));
div.css(sizeCss,divSize+"px");
$.each(['btnPrev','btnNext'],function(index,btn){
if(o[btn]){
o['$'+btn]=$.isFunction(o[btn])?o[btn].call(div[0]):$(o[btn]);
o['$'+btn].click(function(){
var step=index==0?curr-o.scroll:curr+o.scroll;
return go(step);
}
);
}
}
);
if(!o.circular){
if(o.btnPrev&&o.start==0){
o.$btnPrev.addClass(o.btnDisabledClass);
}
if(o.btnNext&&o.start+o.visible>=itemLength){
o.$btnNext.addClass(o.btnDisabledClass);
}
}
if(o.btnGo){
$.each(o.btnGo,function(i,val){
$(val).click(function(){
return go(o.circular?o.visible+i:i);
}
);
}
);
}
if(o.mouseWheel&&div.mousewheel){
div.mousewheel(function(e,d){
return d>0?go(curr-o.scroll):go(curr+o.scroll);
}
);
}
if(o.auto){
var setAutoAdvance,advanceCounter=0,autoStop=iterations(tl,o);
var advancer=function(){
setAutoAdvance=setTimeout(function(){
if(!autoStop||autoStop>advanceCounter){
go(curr+o.scroll);
advanceCounter++;
advancer();
}
}
,o.timeout+o.speed);
}
;
advancer();
$(document).bind('pauseCarousel',function(event){
clearTimeout(setAutoAdvance);
$(event.target).data('paused',true);
}
).bind('resumeCarousel',function(event){
advancer();
$(event.target).data('paused',false);
}
);
if(o.pause){
div.mouseenter(function(){
div.trigger('pauseCarousel');
}
).mouseleave(function(){
div.trigger('resumeCarousel');
}
);
}
}
function vis(){
return li.slice(curr).slice(0,v);
}
function go(to){
if(!running){
if(o.beforeStart){
o.beforeStart.call(this,vis());
}
if(o.circular){
if(to<=o.start-v-1){
ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");
curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll;
}
else if(to>=itemLength-v+1){
ul.css(animCss,-((v)*liSize)+"px");
curr=to==itemLength-v+1?v+1:v+o.scroll;
}
else{
curr=to;
}
}
else{
o.$btnPrev.toggleClass(o.btnDisabledClass,o.btnPrev&&to<=0);
o.$btnNext.toggleClass(o.btnDisabledClass,o.btnNext&&to>itemLength-v);
if(to<0){
curr=0;
}
else if(to>itemLength-v){
curr=itemLength-v;
}
else{
curr=to;
}
}
running=true;
ul.animate(animCss=="left"?{
left:-(curr*liSize)}
:{
top:-(curr*liSize)}
,o.speed,o.easing,function(){
if(o.afterEnd){
o.afterEnd.call(this,vis());
}
running=false;
}
);
}
return false;
}
}
);
}
;
$.fn.jCarouselLite.defaults={
btnPrev:null,btnNext:null,btnDisabledClass:'disabled',btnGo:null,mouseWheel:false,speed:200,easing:null,auto:false,autoStop:false,timeout:4000,pause:true,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null}
;
function css(el,prop){
return parseInt($.css(el[0],prop),10)||0;
}
function width(el){
return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight');
}
function height(el){
return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom');
}
function iterations(itemLength,options){
return options.autoStop&&(options.circular?options.autoStop:Math.min(itemLength,options.autoStop));
}
}
)(jQuery);
CSS代码(style.css):
::selection{background:#fad687;color:#785b1e;}
::-moz-selection{background:#fad687;color:#785b1e;}
*:focus{outline:none;}
html,body,ul,ol,li,form,blockquote,dl,dd,img,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;list-style:none;border:none}
.single-blog .column-left .post .entry ul,.single-blog .column-left .post .entry li{list-style:disc;}
.single-blog .column-left .post .entry li{margin-left:35px;margin-bottom:22px;line-height:18px;text-shadow:0px 1px 0px #FBFAFA;}
dd,blockquote{margin-left:1em;}
fieldset{border:none;}
input,select,textarea{font-size:100%;font-family:inherit;}
/* default styles */
.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.alignleft{float:left}
.alignright{float:right}
img.alignleft{margin:3px 20px 10px 0;float:left}
img.alignright{margin:3px 0 10px 20px;float:right}
.text-right{text-align:right}
.text-left{text-align:left}
.text-center{text-align:center}
.clear{clear:both}
.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}
.clearfix:after{clear:both}
hr{height:1px;color:#969696;background:#969696;padding:0;margin:15px 0;border:none}
a{color:#da6b02;text-decoration:none;outline:none}
/*--------- layout */
body{background:url(images/body_bg.jpg) 0 0 repeat-x #e1e0dd;font-family:Arial,Helvetica,sans-serif;font-size:13px}
.bodywrap{background:url(images/container_bg_top.jpg) center top no-repeat;min-height:800px;min-width:1024px;width:100%}
.homepage{background:url(images/container_bg_top_home.jpg) center top no-repeat;}
.page404{background:url(images/container_bg_top_no_podium.jpg) center top no-repeat}
.container{width:990px;margin:0 auto;}
p{line-height:18px;text-shadow:0px 1px 0px #fbfafa;}
.highlights p,.faq-list p{margin-top:2px;}
.pay-methods{margin-top:8px;}
.doc-item-text p{margin:0 0 4px 0;}
h1,h2,h3,h4{text-shadow:0px 1px 0px #fbfafa;font-weight:normal;color:#262626;font-family:'VegurRegular',Arial,sans-serif;}
h2{font-size:24px;letter-spacing:-0.5px;line-height:24px;}
h3{font-size:19px;color:#262626;}
/*--------- latest list */
.latest-box{background:url("images/home_latest_bg.jpg") no-repeat scroll center top transparent;clear:both;height:153px;margin:14px 0 61px;position:relative;}
.latest-box h2{color:#d96b01;font-size:21px}
.latest-text{padding:40px 0 0 110px;width:205px;float:left}
.latest-list{width:555px;height:100px;float:left;position:relative;margin:27px 0 0 40px}
.latest-list .next,.latest-list .prev{cursor:pointer;display:block;width:7px;height:13px;position:absolute;text-indent:-5000px;top:40px;}
.latest-list .prev{background:url(images/arrow_prev_next.gif) 0 0 no-repeat;left:0}
.latest-list .next{background:url(images/arrow_prev_next.gif) 0 -13px no-repeat;right:0}
.latest-list .prev:hover{background:url(images/arrow_prev_next.gif) -7px 0 no-repeat;}
.latest-list .next:hover{background:url(images/arrow_prev_next.gif) -7px -13px no-repeat;}
.latest-list .disabled,.latest-list .disabled:hover{background:none;cursor:auto}
.caruselList{width:535px;margin:0 10px}
.caruselList li{width:97px;height:95px;background:url(images/slider_small_bg.png) no-repeat;position:relative;display:block;float:left;margin:0 5px}
.caruselList li a{display:block;float:left;height:90px}
.caruselList .thumb,.thumb{margin:8px;position:relative;z-index:1}
.caruselList .free,.doc-item-img .free,.listThemes .free{display:block;position:absolute;background:url(images/ribbon_free.png) no-repeat;width:73px;height:63px;top:0;right:0;z-index:2;text-indent:-5000px}
.caruselList .new,.doc-item-img .new,.listThemes .new,.caruselList .d10,.doc-item-img .d10,.listThemes .d10,.caruselList .d20,.doc-item-img .d20,.listThemes .d20,.caruselList .d30,.doc-item-img .d30,.listThemes .d30,.caruselList .d40,.doc-item-img .d40,.listThemes .d40,.caruselList .d50,.doc-item-img .d50,.listThemes .d50{display:block;position:absolute;background:url(images/ribbon_new.png) no-repeat;width:73px;height:63px;top:0;right:0;z-index:2;text-indent:-5000px}
.caruselList .d10,.doc-item-img .d10,.listThemes .d10{background:url(images/d_10.png) no-repeat;}
.caruselList .d20,.doc-item-img .d20,.listThemes .d20{background:url(images/d_20.png) no-repeat;}
.caruselList .d30,.doc-item-img .d30,.listThemes .d30{background:url(images/d_30.png) no-repeat;}
.caruselList .d40,.doc-item-img .d40,.listThemes .d40{background:url(images/d_40.png) no-repeat;}
.caruselList .d50,.doc-item-img .d50,.listThemes .d50{background:url(images/d_50.png) no-repeat;}
/*--------- tooltip */
.tooltip{display:none;background:url(images/tooltip_bg_up.png) no-repeat;width:431px;height:225px;padding:10px 12px 23px 10px;z-index:200}
.tooltip.bottom{background:url(images/tooltip_bg_bot.png) no-repeat;padding:23px 12px 10px 10px;}
/*--------- 3 cols layout */
.col3{width:270px;float:left;margin:0 30px}
.col3 h3{line-height:36px;margin-bottom:6px;padding-left:40px;}
.col3 .text-descr{height:86px;}
.col3 .text-descr p{margin:0}
.testimonials{margin-left:50px}
.testimonials h3{background:url(images/icon_testiomonials.gif) 5px 0 no-repeat}
#quotes,#hblog{overflow:hidden;position:relative}
#quotes p,#hblog p{margin:0;}
#quotes .fadecontent,#hblog .fadecontent{height:65px;margin-bottom:19px;overflow:hidden;width:272px;}
#quotes .slides_container,#hblog .slides_container{height:86px;width:272px;}
.earn h3{background:url(images/icon_earn.gif) 0 0 no-repeat}
.hblog h3{background:url(images/icon_latest_blog_entry.gif) 0 0 no-repeat}
.newsletter{width:230px}
.newsletter h3{background:url(images/icon_newsletter.gif) 0 0 no-repeat}
.newsletter .inputtext{width:206px;height:20px;padding:5px 5px 5px 10px;border:none;background:url(images/inputtext.gif) no-repeat;color:#DA6B02;margin:10px 0 0 0}
/*--------- after content */
.after_content{width:100%;background:url(images/after_content_bg.gif) 0 0 repeat-x #fbfbfb;}
.after_content .container{background:url(images/after_content_bg_mid.gif) center 0 no-repeat;width:900px;height:138px;padding:46px 48px 0 48px}
.also-like-text{float:left;width:285px}
.also-like-text h3{color:#34332f;font-family:'BodoniStd-BookItalic',"Times New Roman",Times,serif;font-size:27px;font-weight:normal;margin:33px 0 0 68px;padding:0;}
.after_content .latest-list{width:555px;height:100px;float:left;position:relative;right:5px;margin:0 0 0 0px}
.download-info .download-button,.download-info .more-button{width:120px;height:0;padding-top:36px;overflow:hidden;display:block;}
.download-info .download-button{background:url(downloadbutton.gif) no-repeat top left;}
.download-info .more-button{background:url(morebutton.gif) no-repeat top left;}
分享到QQ
分享到微博
微信扫一扫
