js借助图片实现链接滚动式下划线的特效代码

发布时间：2018-08-16 00:08 所属栏目：121 来源：站长网

导读：js借助图片实现链接滚动式下划线的特效代码，以往看到的链接下划线都是比较普通的，鼠标放在链接上即可显示出下划线，但本效果让下划线变成动画，慢慢的显示出来，有兴趣的可参见代码。示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//

　　js借助图片实现链接滚动式下划线的特效代码，以往看到的链接下划线都是比较普通的，鼠标放在链接上即可显示出下划线，但本效果让下划线变成动画，慢慢的显示出来，有兴趣的可参见代码。

　　示例：

<!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>链接样式</title> <style type="text/css"> .box{ float:left;} .box li{ list-style:none; height:24px;} .box a{ font-size:12px; color:#333;} .menuBox li{ list-style:none; height:24px; float:left; margin-right:5px;} .menuBox a{ font-size:12px; color:#333;} .menuBox a:hover{ color:#000;} </style> <script type="text/javascript"> var Astyle = function (cName,seat){this.initialize(cName,seat);} Astyle.prototype = { seat : null, initialize : function(cName,seat){ this.seat = seat; var self = this; var obj = self.getClass(document.body,cName); var lang = 1000; for(var i=0;i<obj.length;i++){ obj[i].style.textDecoration = "none"; obj[i].style.background = "url(veryhuo_line.jpg) no-repeat "+(-lang)+"px "+this.seat; obj[i].onmouseover = function(){ this.style.backgroundPosition = -lang*2 + "px"; if(this.style.backgroundPositionX != undefined){ //判断是否是IE那个贱货 self.startMove(this,{backgroundPositionX:-lang+this.offsetWidth}); }else{ self.startMove(this,{backgroundPosition:-lang+this.offsetWidth}); } } obj[i].onmouseout = function(){ if(this.style.backgroundPositionX != undefined){ self.startMove(this,{backgroundPositionX:this.offsetWidth}); }else{ self.startMove(this,{backgroundPosition:this.offsetWidth}); } } } }, getClass : function(oParent, sClass){ var aElem = oParent.getElementsByTagName('*'); var aClass = []; var i = 0; for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]); return aClass; }, startMove : function(target, object, onComplete){ var self = this; if(target.timer)clearInterval(target.timer); target.timer = setInterval(function (){ self.doMove(target, object, onComplete); }, 30); }, doMove : function(target, object, onComplete){ var iCur = 0; var attr = ''; var bStop = true; var self = this; for(attr in object){ attr == 'opacity' ? iCur = parseInt(parseFloat(self.getStyle(target, 'opacity'))*100) : iCur = parseInt(self.getStyle(target, attr)); if(isNaN(iCur))iCur = 0; if(navigator.userAgent.indexOf("<b>Firefox</b>") > 0){ var iSpeed = (object[attr]-iCur) / 3; }else{ var iSpeed = (object[attr]-iCur) / 3; } iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(parseInt(object[attr])!=iCur)bStop = false; if(attr=='opacity'){ target.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")"; target.style.opacity = (iCur + iSpeed) / 100; }else if(attr=='backgroundPosition'){ target.style.backgroundPosition = iCur+iSpeed+"px " + this.seat; }else if(attr=='backgroundPositionX'){ target.style.backgroundPosition = iCur+iSpeed+"px " + this.seat; }else{ attr == 'zIndex' ? target.style[attr] = iCur + iSpeed : target.style[attr] = iCur + iSpeed +'px'; } } if(bStop){ clearInterval(target.timer); target.timer = null; if(onComplete)onComplete(); } }, getStyle : function(target, attr){ return target.currentStyle?target.currentStyle[attr]:getComputedStyle(target, false)[attr]; } } /** * 用法如下 * @method Astyle(cName,seat); * @param cName 要运用到的class * @param seat 线的位子有效参数（"top","center","bottom"） */ window.onload = function(){ var astyle = new Astyle("ButtonStyle","bottom"); var astyle2 = new Astyle("ButtonStyle2","center"); var astyle3 = new Astyle("ButtonStyle3","top"); var asyleMenu = new Astyle("menu","bottom"); } </script> </head> <body> <div class="box"> <ul> <li><a href="#" class="ButtonStyle">·王晨会见ICANN总裁政务微博：力行"织博为民"</a></li> <li><a href="#" class="ButtonStyle">·第五届中美互联网论坛举行钱小芊发表演讲(图)</a></li> <li><a href="#" class="ButtonStyle">·高官全部落选工程院院士个别单位领导曾拉票</a></li> </ul> </div> <div class="box"> <ul> <li><a href="#" class="ButtonStyle2">·中国南极科考队直升机失事 2名机组</a></li> <li><a href="#" class="ButtonStyle2">·今年255人因食品安全案获刑李克强要</a></li> <li><a href="#" class="ButtonStyle2">·住建部官员：PM2.5指数升高与建造玻璃幕墙有关</a></li> </ul> </div> <div class="box"> <ul> <li><a href="#" class="ButtonStyle3">·中国南极科考队直升机失事 2名机组</a></li> <li><a href="#" class="ButtonStyle3">·今年255人因食品安全案获刑李克强要</a></li> <li><a href="#" class="ButtonStyle3">·住建部官员：PM2.5指数升高与建造玻璃幕墙有关</a></li> </ul> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：ASP站长网）