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="hoverattribute.css" type="text/css" media="screen" />
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript" 	src="jquery.hoverattribute-1.0.7.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$("h1 a").hoverAttribute({
			removeWWW: true,
			highlightURLPart: "domain"//"lastURIPart"
		});
		$("h2 a").hoverAttribute({
			attribute: "rel",
			tweenInFrom: "bottom"
		});
		$("h3 a").hoverAttribute({
			animationTime: 0.1,
			wrapLength: 55,
			wrapLink: "middle",
			removeProtocol: true
		});
	});
	</script>
	
</head>

<body>

<div style="width:700px;">
	<h1><a href="#">Alexander Wallin on Facebook</a></h1>
	<h2><a href="#/" rel="The rel-attribute">Some link</a></h2>
	<h3><a href="#">Buy a birch</a></h3>
</div>
</body>
</html>

JS代码(jquery.hoverattribute-1.0.7.min.js):

/** * HoverAttribute jQuery plugin v1.0.7 * by Alexander Wallin (http://www.afekenholm.se). * * Licensed under MIT (http://www.afekenholm.se/license.txt) * * parseUri() method by Steven Levithan (http://blog.stevenlevithan.com/). * * This plugin allows you to make (link-)elements more dynamic by making an attribute * of that element show up on hovering. This is mainly intended for <a> tags residing * within full-width elements,such as headings or list entries. * * For comments,discussion,propsals and/or development;
	please visit * http://www.afekenholm.se/hoverattribute-jquery-plugin or send a mail to * contact@afekenholm.se. * * @author:Alexander Wallin (http://www.afekenholm.se) * @version:1.0.7 * @url:http://www.afekenholm.se/hoverattribute-jquery-plugin */
(function($){
	$.hoverAttribute=function(el,options){
	var base=this;
	base.options=$.extend({
}
,$.hoverAttribute.defaults,options);
	if(base.options.highlightURLPart=="domain")base.options.highlightURLPart="host";
	base.$el=$(el);
	base.el=el;
	base.$el.$parent=base.$el.parent();
	base.$el.initWidth=base.$el.width();
	base.$el.initHeight=base.$el.height();
	var elText=base.$el.html(),attrValue=base.$el.attr(base.options.attribute);
	base.init=function(){
	base.setupCSS();
	if((base.options.attribute=="href"||base.options.parseAsURL==true)&&base.options.parseAsURL!=false)base.buildNiceHref();
	base.buildContent();
	base.setupHovering();
}
;
	base.setupCSS=function(){
	base.spanCSSDefaults={
	'display':'block','position':'absolute','top':'0','overflow':'hidden','width':'auto','white-space':'nowrap'}
;
	base.spanCSSVisible={
	'opacity':'1'}
;
	base.spanCSSHidden={
	'opacity':'0'}
;
	var twif=base.options.tweenInFrom,valHidden='0';
	if(twif=='left')valHidden='-10px';
	else if(twif=='top')valHidden='-'+base.$el.initHeight+'px';
	else if(twif=='right')valHidden='10px';
	else if(twif=='bottom')valHidden=base.$el.initHeight+'px';
	if(twif=='left'||twif=='right'){
	base.spanCSSVisible.left='0';
	base.spanCSSHidden.left=valHidden;
}
else if(twif=='top'||twif=='bottom'){
	base.spanCSSVisible.top='0';
	base.spanCSSHidden.top=valHidden;
}
}
base.buildNiceHref=function(){
	if(base.options.removeProtocol)attrValue=attrValue.replace(/^(mailto:|(http|https|ftp):\/\/)/,"");
	if(base.options.removeWWW)attrValue=attrValue.replace("www.","");
	if(base.options.wrapLink!="none"){
	var doWrapping=true,wrapLength=base.options.wrapLength;
	if(wrapLength=="auto")wrapLength=elText.length-3;
	else if(wrapLength=="none"||wrapLength<=0)doWrapping=false;
	if(doWrapping&&attrValue.length>wrapLength+3){
	var wrapLink=base.options.wrapLink;
	if(wrapLink=="after"){
	attrValue=attrValue.substr(0,wrapLength)+"...";
}
else if(wrapLink=="before"){
	var numChars=attrValue.length,wrapStart=numChars-wrapLength;
	attrValue="..."+attrValue.substr(wrapStart,numChars-1);
}
else if(wrapLink=="middle"){
	var hrefStart=attrValue.substr(0,Math.floor(attrValue.length/2)),hrefEnd=attrValue.substr(hrefStart.length,attrValue.length);
	hrefStart=hrefStart.substr(0,Math.floor(wrapLength/2));
	hrefEnd=hrefEnd.substr(hrefEnd.length-Math.ceil(wrapLength/2),hrefEnd.length);
	attrValue=hrefStart+"..."+hrefEnd;
}
}
}
if(base.options.highlightURLPart!="none"){
	var urlParts=parseUri(attrValue),partName=base.options.highlightURLPart;
	base.highlightPart=function(str){
	attrValue=attrValue.replace(str,"<span class='hoverattribute-highlight'>"+str+"</span>");
}
;
	if(partName=="lastURIPart"){
	var path=urlParts.path,lastPart=path.match(/[a-zA-Z0-9-_]+\/?$/i);
	base.highlightPart(lastPart);
}
else if(urlParts[partName]!=undefined&&urlParts[partName]!=""){
	base.highlightPart(urlParts[partName]);
}
else{
}
}
}
base.buildContent=function(){
	base.$el.css({
	'display':'block','position':'relative','width':base.$el.initWidth+'px','height':base.$el.height()+'px','overflow':'hidden'}
).html("<span class='hoverattribute-title'>"+elText+"</span>").append("<span class='hoverattribute-attr'></span>");
	$(".hoverattribute-title",base.$el).css($.extend({
}
,base.spanCSSDefaults,base.spanCSSVisible));
	$(".hoverattribute-attr",base.$el).css($.extend({
}
,base.spanCSSDefaults,base.spanCSSHidden)).css({
	'width':'auto','height':base.$el.initHeight+'px'}
).html(attrValue);
}
;
	base.setupHovering=function(){
	var animTime=base.options.animationTime*1000,animEase=base.options.animationEase;
	base.$el.bind('mouseover',function(){
	if(base.options.cssSettings.canExpandToFullWidth){
	$(this).css('width',base.$el.$parent.width()+'px');
}
$(".hoverattribute-title",this).stop().animate(base.spanCSSHidden,animTime,animEase);
	$(".hoverattribute-attr",this).stop().animate(base.spanCSSVisible,animTime,animEase);
}
).bind('mouseout',function(){
	var $thisEl=$(this);
	$(".hoverattribute-title",this).stop().animate(base.spanCSSVisible,animTime,animEase);
	$(".hoverattribute-attr",this).stop().animate(base.spanCSSHidden,animTime,animEase,function(){
	$thisEl.css('width',base.$el.initWidth+'px');
}
);
}
);
}
;
	base.init();
}
;
	$.hoverAttribute.defaults={
	attribute:"href",animationTime:0.3,animationEase:"swing",tweenInFrom:"left",parseAsURL:null,removeProtocol:false,removeWWW:false,wrapLink:"after",wrapLength:60,highlightURLPart:"host",cssSettings:{
	canExpandToFullWidth:true}
}
;
	$.fn.hoverAttribute=function(options){
	return this.each(function(i){
	new $.hoverAttribute(this,options);
}
);
}
;
}
)(jQuery);
	// parseUri1.2.2// (c)StevenLevithan<stevenlevithan.com>// MITLicensefunction parseUri(str){
	var o=parseUri.options,m=o.parser[o.strictMode?"strict":"loose"].exec(str),uri={
}
,i=14;
	while(i--)uri[o.key[i]]=m[i]||"";
	uri[o.q.name]={
}
;
	uri[o.key[12]].replace(o.q.parser,function($0,$1,$2){
	if($1)uri[o.q.name][$1]=$2;
}
);
	return uri;
}
;
	parseUri.options={
	strictMode:false,key:["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],q:{
	name:"queryKey",parser:/(?:^|&)([^&=]*)=?([^&]*)/g}
,parser:{
	strict:/^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,loose:/^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/}
}
;

CSS代码(hoverattribute.css):

a{color:#333;text-decoration:none;}
h1 a{background:#ddd;}
h1,h2,h3{font-family:"Trebuchet MS",Helvetica,Arial;}
h3 .hoverattribute-attr{font-family:Monospace;font-size:18px;}
.hoverattribute-title{}
.hoverattribute-attr{color:#999;font-weight:normal;letter-spacing:-1.5px;}
.hoverattribute-highlight{color:#333;}

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