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

jquery tips提示图片信息特效代码

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

以下是 jquery tips提示图片信息特效代码 的示例演示效果:

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

部分效果截图:

jquery tips提示图片信息特效代码

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>jquery tips提示图片信息</title>
<link href="images/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="images/jquery.1.4.2-min.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif ,"宋体";}
/* picList */
.picList{width:550px;height:440px;margin:20px auto;}
.picList ul{float:left;position:relative;}
.picList ul li{position:absolute;width:110px;height:110px;}
.picList ul li a,.picList ul li a img{width:110px;height:110px;flot:left;display:block;position:relative;}
.picList ul li a:hover{zoom:1;}
.picList ul li.p1{left:110px;top:0;}
.picList ul li.p2{left:220px;top:0;}
.picList ul li.p3{left:440px;top:0;}
.picList ul li.p4{left:0;top:110px;}
.picList ul li.p4 img{width:110px;height:220px;}
.picList ul li.p5{left:220px;top:110px;}
.picList ul li.p5 img{width:110px;height:220px;}
.picList ul li.p6{left:330px;top:110px;}
.picList ul li.p7{left:110px;top:220px;}
.picList ul li.p8{left:330px;top:220px;}
.picList ul li.p8 img{width:110px;height:220px;}
.picList ul li.p9{left:440px;top:220px;}
.picList ul li.p10{left:110px;top:330px;}
.picList ul li.p11{left:0;top:0;background:#fff4f9;}
.picList ul li.p12{left:330px;top:0;background:#fff2fa;}
.picList ul li.p13{left:110px;top:110px;background:#feeef9;}
.picList ul li.p14{left:440px;top:110px;background:#fce6f0;}
.picList ul li.p15{left:left;top:330px;background:#fdc8ea;}
.picList ul li.p16{left:220px;top:330px;background:#fffafd;}
.picList ul li.p17{left:440px;top:330px;background:#fee7f5;}
/* 弹出层 */
.poptip{position:absolute;z-index:999;right:20px;top:20px;background:#fff;border-left:#9ca09f 1px solid;border-right:#9ca09f 1px solid;width:144px;text-align:center;padding:3px;}
.poptip span{position:absolute;background:url(images/tips.png) no-repeat;display:block;}
.poptip span.t_bg,.poptip span.b_bg{width:152px;height:6px;overflow:hidden;}
.poptip span.t_bg{background-position:left top;left:-1px;top:-6px;}
.poptip span.b_bg{background-position:left -6px;right:-1px;bottom:-6px;}
.poptip span.arrow_bottom{background-position:-16px -17px;width:15px;height:8px;overflow:hidden;top:-13px;left:50%;}
.poptip span.arrow_top{background-position:left -17px;width:15px;height:8px;overflow:hidden;bottom:-13px;right:50%;}
.poptip span.arrow_right{background-position:-42px -12px;width:7px;height:13px;overflow:hidden;top:20%;left:-7px;}
.poptip span.arrow_left{background-position:-34px -12px;width:8px;height:13px;overflow:hidden;top:20%;right:-7px;}
.poptip span.arrow_leftH{background-position:-34px -12px;width:7px;height:13px;overflow:hidden;top:80%;right:-6px;}
.poptip img{width:110px;height:110px;margin:0 auto;}
.poptip p{text-align:center;height:32px;line-height:16px; overflow:hidden;color:#000;}
.poptip p.ptitle a span{clear:both;width:100%;position:relative;height:16px;line-height:16px;overflow:hidden;background:none;cursor:pointer;}
.poptip p.price{background:none;height:auto;display:inline-block;font-weight:bold;font-size:12px;color:#9b669a!important;font-family:Tahoma, Geneva, sans-serif;}
</style>


<script type="text/javascript">
(function(b){

	b.removeTips=function(){
		var a=document.getElementById("xiuTipBox");
		if(!a)
		return false;
		a.showTip&&clearTimeout(a.showTip);
		a.hideTip&&clearTimeout(a.hideTip);
		b(a).hide().remove()
	};
	
	b.fn.hideTips=function(){
		var a=document.getElementById("xiuTipBox");
		if(!a)
		return false;
		var h=this;
		a.showTip&&clearTimeout(a.showTip);
		
		a.hideTip=setTimeout(function(){
			b(a).data("showTipObj")===h[0]&&b(a).hide()
		},300)};
		
		b.fn.showTips=function(){
			var a=document.getElementById("xiuTipBox");
			if(!a)
			return false;
			var h=this;
			
			a.hideTip&&clearTimeout(a.hideTip);
			
			a.showTip=setTimeout(function(){
				b(a).data("showTipObj")===h[0]&&b(a).show()
			},300)};
			
			b.fn.tips=function(a){
				var h=this,e=document,g=b.extend({content:"",arrow:"bottom",outlineBox:false},a),c=g.content||h.attr("info");
				a=g.arrow;
				var d=h.offset();
				limitBox=g.outlineBox;
				if(!c||c.split("|")<4)
				return false;
				g=c.split("|");
				c=h.attr("href");
				var f=h.find("img:first").attr("src");
				if(e=e.getElementById("xiuTipBox")){
					if(b(e).data("showTipObj")===this[0]){
						h.showTips();
						return false
					}
					b.removeTips()
				}
				e=b('<div class="poptip" id="xiuTipBox" style="position:absolute; display:none;"><span class="t_bg"></span><span class="b_bg"></span><span class="arrow_'+a+'" id="tipArr"></span><a href="'+c+'" target="_blank"><img src="'+f+'" id="tipImg"></a><p class="ptitle"><a href="'+c+'" target="_blank"><span>'+g[0]+"</span><span>"+g[1]+'</span></a></p><p class="price">u00a5'+g[2]+"</p></div>").appendTo(b("body"));
				
				e.hover(function(){
					h.showTips()
				},function(){
					h.hideTips()
				});
				
				if(typeof h.attr("tipPos")!="undefined"){
					c=h.attr("tipPos").split("|");
					d=c[0];
					g=c[1];
					a=c[2];
					f=c[3];
					m=c[4];
					e.find("#tipImg").css({width:f+"px",height:m+"px"})
				}else{
					c=d.left;
					var l=d.top,o=e.outerHeight(true),k=e.outerWidth(true),m=h.find("img:first").height();
					f=h.find("img:first").width();
					var n=h.outerWidth(true);
					d=g="";
					e.find("#tipImg").css({width:f+"px",height:m+"px"});
					
					if(limitBox){
						var w=limitBox.offset().top,j=limitBox.offset().left,p=j+limitBox.width(),t=w+limitBox.height();
						d=c-k;
						g=l+6;
						a="left";
						if(d<j){
							d=c+n;
							g=l+6;
							a="right"
						}
						
						if(g+e.height()>t||d+k>p)
						
						if(m===220){
							d=c-k;
							g=l-l-e.height()+t-12;
							a="leftH"
						}else{
							d=c-k/2+f/2;
							d=d+k>p?c+n-k:c;
							g=l-o-6;
							a="top";
						if(g<w){
							d=c-k/2+f/2;
							d=d+k>p?c+n-k:c;
							g=l+m+6;a="bottom"
						}
					}
				}else switch(a){
					case 
						"top":d=c-k/2+f/2;
						g=l-o-6;
					break;

					case 
						"bottom":d=c-k/2+f/2;
						g=l+m+6;
					break;

					case 
						"right":d=c+n;
						g=l+6;
					break;

					case 
						"left":d=c-k;
						g=l+6;
					break;

					default:d=c-k/2+f/2;

					g=l-o;

					break
				}
			}
			
		e.css({top:g+"px",left:d+"px"}).find("#tipArr").get(0).className="arrow_"+a;
		b.fn.bgIframe&&e.bgIframe();
		h.attr("tipPos",d+"|"+g+"|"+a+"|"+f+"|"+m);
		e.data("showTipObj",h[0]);
		h.showTips();
		
		return h
	
	}
		
})(jQuery);

$(document).ready(function(){
	
	$(".showTip a").hover(function(){
		
		var a=$(this).parent().parent().parent();
		
		$(this).tips({
			outlineBox:a
		});
		
	},function(){
		$(this).hideTips()
	});

});	
</script>

<div class="picList">
	<ul class="showTip">
		<li class="p1"><a href="#" target="_blank" info="manosque|羽绒服|1,223.00"><img src="images/1e736a44-97bb-420c-8291-87180142963e.jpg"></a></li>
		<li class="p2"><a href="#" target="_blank" info="杜嘉班纳|男羽绒外套|3,399.00"><img src="images/ad4779a9-65ed-4c1a-ad9c-47132c58e0cf.jpg"></a></li>
		<li class="p3"><a href="#" target="_blank" info="华伦天奴|女长袖毛衫|1,967.00"><img src="images/b5747f62-7ef2-467b-bb0a-c94347d93f1c.jpg"></a></li>
		<li class="p4"><a href="#" target="_blank" info="猎马仕|羽绒上衣|2,599.00"><img src="images/4ce27b55-6d8f-46d2-92f6-bde1394420f7.jpg"></a></li>
		<li class="p5"><a href="#" target="_blank" info="博柏利|经典外套|6,199.00"><img src="images/69ac85ab-c870-40f8-a875-d5fb345a2f95.jpg"></a></li>
		<li class="p6"><a href="#" target="_blank" info="ADD|棉衣外套|2,799.00"><img src="images/e59ea56c-8ecb-4e93-847c-03e5b28a1643.jpg"></a></li>
		<li class="p7"><a href="#" target="_blank" info="大嘴猴|长袖连帽卫衣|359.00"><img src="images/1045c17c-dca8-4752-8be7-cdd8c9000bcb.jpg"></a></li>
		<li class="p8"><a href="#" target="_blank" info="阿玛尼精选|男士休闲外套|3,399.00"><img src="images/eb41a199-cbb0-4ad2-a8af-ae5e735a2009.jpg"></a></li>
		<li class="p9"><a href="#" target="_blank" info="CALVIN KLEIN JEANS|喇叭牛仔裤|598.00"><img src="images/fdfa2f85-bace-4170-8097-9171a26ed643.jpg"></a></li>
		<li class="p10"><a href="#" target="_blank" info="古驰|男士羊毛衫|3,199.00"><img src="images/aa081f0b-2011-423a-b080-9956210e3983.jpg"></a></li>
		<li class="p11"></li>
		<li class="p12"></li>
		<li class="p13"></li>
		<li class="p14"></li>
		<li class="p15"></li>
		<li class="p16"></li>
		<li class="p17"></li>
	</ul>
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";/* reset */
*{margin:0;padding:0;list-style-type:none;}
a{blr:expression(this.onFocus=this.blur())}
/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
:focus{outline:0;}
label{cursor:pointer;}
img{vertical-align:middle;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
h1{font-size:16px;}
h2,h3,h4{font-size:14px;}
h5,h6{font-size:12px;}
abbr,acronym{border:0;font-variant:normal}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
a,img{border:0;}
a,a:visited{color:#5e5e5e;text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* shortcut */
.shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}
*html,*html body /* 修正IE6振动bug */
{background-image:url(about:blank);background-attachment:fixed;}
*html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}
.shortcut h1{font-size:14px;font-family:"微软雅黑","宋体";}
.shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.shortcut a:hover{background:#fff;}
.shortcut span.right{float:right;}
.shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}
.headeline{height:40px;overflow:hidden;}
.adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}
.adv728x90{width:728px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
89.51 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
89.51 KB
立即下载
俞滢燕雁
了解
打赏作者 鼓励作者
Html JS 图片特效4
最新结算
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
打赏文章