相应鼠标笔墨链接实现向上“翻腾”的结果

发布时间：2018-08-16 14:04:32 所属栏目：编程来源：站长网

导读：相应鼠标笔墨链接实现向上翻腾的结果，这里就不多先容了，一览无余的就可以看到这个结果，可是较量本性了一些，现实运用预计不会许多。基于 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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys