响应鼠标文字链接实现向上“翻滚”的效果

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

导读：

导读：响应鼠标文字链接实现向上翻滚的效果，这里就不多介绍了，一目了然的就可以看到这个效果，但是比较个性了一些，实际运用估计不会很多。基于 Java Script和CSS实现，注：颜色值要写全（如#000000）否则IE那贱货不显示你设置的颜色。示例： !DOCTYPE html P

　　响应鼠标文字链接实现向上“翻滚”的效果，这里就不多介绍了，一目了然的就可以看到这个效果，但是比较个性了一些，实际运用估计不会很多。基于JavaScript和CSS实现，注：颜色值要写全（如#000000）否则IE那贱货不显示你设置的颜色。

　　示例：

<!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 li{ list-style:none; height:20px; margin-top:4px; line-height:20px; font-size:12px;} .menuBox li{ list-style:none; height:20px; margin-top:4px; width:60px; float:left; margin-right:10px; line-height:20px; font-size:12px;} </style> <script type="text/javascript"> var RollText = function(cName,color1,color2){this.initialize(cName,color1,color2);} RollText.prototype = { initialize:function(cName,color1,color2){ var self = this; var obj = self.getClass(document.body,cName); for(var i=0;i<obj[0].getElementsByTagName("li").length;i++){ var li = obj[0].getElementsByTagName("li")[i]; li.style.position = "relative"; li.style.overflow = "hidden"; var text = li.getElementsByTagName("a")[0]; text.style.position = "absolute"; text.style.textDecoration = "none"; text.innerHTML = "<font color="+color1+">" + text.innerHTML + "</font><br /><font color="+color2+">" + text.innerHTML + "</font>"; text.onmouseover = function(){ self.startMove(this,{"marginTop":-li.offsetHeight}); } text.onmouseout = function(){ self.startMove(this,{"marginTop":0}); } } }, 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{ 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 RollText(cName,color1,color2); * @param cName 要运用到的class * @param color1 默认时文字颜色 * @param color1 鼠标经过翻滚显示的字体颜色 * 注：颜色值要写全（如#000000）否则IE那贱货不显示你设置的颜色 */ window.onload = function(){ //新闻列表展示 var roll = new RollText("box","#000000","#ff0000"); //网站菜单展示 var rollMenu = new RollText("menuBox","#000000","#CC6000"); } </script> </head> <body> <div class="menuBox"> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品中心</a></li> <li><a href="#">案例展示</a></li> <li><a href="#">联系我们</a></li> </ul> </div> <br /> <br /> <br /> <br /> <br /> <div class="box"> <ul> <li><a href="#">·红十字总会今年财务收入近6亿</a></li> <li><a href="#">·中国南极科考队直升机失事 2名机组</a></li> <li><a href="#">·今年255人因食品安全案获刑李克强要</a></li> <li><a href="#">·北京地税局证实年终奖多1元或多缴千元个税</a></li> <li><a href="#">·欧央行两个月内再次降息宣布多项措施拯救欧洲</a></li> <li><a href="#">·时代周刊公布年度全球十大新闻：阿拉伯之春居首</a></li> <li><a href="#">·伊朗军方通过电视台播出击落美国无人机画面</a></li> <li><a href="#">·王晨会见ICANN总裁政务微博：力行"织博为民"</a></li> <li><a href="#">·第五届中美互联网论坛举行钱小芊发表演讲(图)</a></li> <li><a href="#">·高官全部落选工程院院士个别单位领导曾拉票</a></li> <li><a href="#">·住建部官员：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站长网）