仿必应搜索首页图片上显示渐隐渐现的小方块

发布时间：2018-09-24 13:09:20 所属栏目：Asp教程来源：站长网

导读：在图片上方显示渐显渐隐藏的小方格子，微软著名的搜索引擎必应（bing.com）就是使用了这种效果，只不过必应的小方框是可以带链接的，本例中没有实现链接，高手们可以修改一下，抽时间把必应的效果分享给大家，像这样的格子可以有很多，都在响应鼠标动作，

　　在图片上方显示渐显渐隐藏的小方格子，微软著名的搜索引擎必应（bing.com）就是使用了这种效果，只不过必应的小方框是可以带链接的，本例中没有实现链接，高手们可以修改一下，抽时间把必应的效果分享给大家，像这样的格子可以有很多，都在响应鼠标动作，淡入淡出。

　　最近发现有很多朋友采集本站的文章，本来烈-火-网是欢迎复制的，只要给个链接或出处：烈火网 or Liehuo.Net 就可以了，但是某些无耻之人使用了CMS的采集，一晚上就采集了烈火一万多文章，并且去掉所有链接、替换了烈火的文字，用大大的水印盖住烈火的水印，大家可以在网上看到这个无耻网站，就不提名字了。

　　本来是不想说的，烈火的教程虽不是完全原创，但也是辛苦整理来的，就让这些小人们一夜之间采集走了一多半。好了，费话多了，看最终效果吧：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片方格 - 烈@火@学@院</title> <script> window.onload = function(){ var sp = document.getElementById("pic").getElementsByTagName("span"); function e(a,f){ for(var i =0,j=a.length;i<j;i++){ f.call(a[i],i); } } function ap(o,n){ if(document.all){ o.style.filter = "alpha(opacity=" + n + ")" }else{ o.style.opacity = n/100; } } e(sp,function(){ var n=0,o=this; ap(this,n); this.onmouseover = function(){ if(!!o.s){clearInterval(this.s);this.s=null} o.s = setInterval(function(){ n+=4; if(n>100){clearInterval(o.s);o.s=null} ap(o,n); },30) } this.onmouseout = function(){ if(!!o.s){clearInterval(o.s);o.s=null} o.s = setInterval(function(){ n-=4; if(n<0){clearInterval(o.s);o.s=null} ap(o,n); },30) } }) } </script> </head> <body> <style type="text/css"> *{margin:0;padding:0;} ul,li{list-style-type:none;} #pic{position:relative;} .tips,.tips1,.tips2{width:100px;height:100px;display:block;position:absolute;top:50px;left:50px;opacity:1;filter:alpha(opacity=100);border:1px solid #000;background:#fff;} .tips1{top:100px;left:300px;} .tips2{top:100px;left:150px;} </style> <div id="pic"> <img src="/uploads/common/images/pic1.jpg" width="450"> <span class="tips">烈火学院</span> <span class="tips1">www.veryhuo.com</span> <span class="tips2">教程丰富的网站</span> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：源码网）

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

ASP函数-日期转换函数	调试ASP.NET应用程序的
第一次用.net2.0 LOGI	ewebeditor在.net的使