JS实现将鼠标放到链接文字上后的显示效果

JS实现将鼠标放到链接文字上后的显示效果

JS的效果,样式各种各样.从而给我们的网站添加了更多的生机,使我们的网站变得更动感,用户体验更好,在一定的程度上能更好的帮助SEO,帮助网站赢得利润.
先看看要答成的效果图,如下:

要怎么样去实现这样的效果呢?(当鼠标放到More链接上时,浏览器的右下角会提供相对应的文字.)

1. 想要有提示,就必需要给提示的内容.怎么样给这个值了? 这里我们将其值给链接代码里的title标签,之后再通过JS程序给于目标这个标签值.

2. 建立一个接收值的目标,这里将是你提示内容的地方,自己可以选择性地放在任何地方,在这里我们放下底部,代码如下:

3. 加载JS程序文件,合写其代码进行调用.再写如下代码:
//提示
var titleToNote = {
elements : [‘a’, ‘img’],
setup : function(){
if(!document.getElementById || !document.createElement) return;
var div = document.createElement(“div”);
div.setAttribute(“id”, “title2note”);
document.getElementsByTagName(“body”)[0].appendChild(div);
document.getElementById(“title2note”).style.display = “none”;
for(j=0;j for(i=0;i var el = document.getElementsByTagName(titleToNote.elements[j])[i];
if(el.getAttribute(“title”) && el.getAttribute(“title”) != “”){
el.onmouseover = titleToNote.showNote;
el.onmouseout = titleToNote.hideNote;
}
}
}
},
showNote : function()
{
document.getElementById(“title2note”).innerHTML = this.getAttribute(“title”);
this.setAttribute(“title”, “”);
document.getElementById(“title2note”).style.display = “block”;
},
hideNote : function()
{
this.setAttribute(“title”, document.getElementById(“title2note”).innerHTML);
document.getElementById(“title2note”).innerHTML = “”;
document.getElementById(“title2note”).style.display = “none”;
}
}
var oldonload=window.onload;if(typeof window.onload!=’function’){
window.onload=titleToNote.setup;
}else{window.onload=function(){oldonload();
titleToNote.setup();}}
这就实现了JS的调用.刷新页面就行了.
还有一种方法,就是用JQuery来实现.首先在去加载一个JQuery文件,JQuery文件在百度搜索JQuery下载最新的板本就和了.之后再进行程序的调用,这里就只写JavaScript代码了.