Blog

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代码了.

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP